Design comparison
Solution retrospective
I used the svgs in an img tag, I could see them on localhost, but after deployment, the svgs weren't there. If you know the solution for this I would really appreciate it.
The page is fully responsive between 320px and 1440px.
Community feedback
- @JAleXDesigNPosted over 1 year ago
Hello, to solve the image issue you can import the image in this way
Import the image using the path relative to the component where you use it in this case the Description component is inside the components folder, therefore to go to the assets folder we leave the components folder with "../" and enter the assets folder "../assets" and choose the image in this case "../assets/illustration-hero.svg"
import illustrationHero from "../assets/illustration-hero.svg"; export default function Description() { return ( <div className="description"> <div className="descriptionLeft">{/**Content */}</div> <div className="descriptionRight"> <img src={illustrationHero} //And you make use of the imported image via the src prop of the img tag alt="" /> <div className="elipse" /> </div> </div> ); }
Another way would be to place the images inside the public folder of your project, and the way to use them in the image tag would be: If you have for example an image in the public folder with the name illustration-hero.svg
<img src="/illustration-hero.svg" //You access the public folder starting with "/" followed by the name of the image alt="" />
In this way, when making the production build the images will also be included, since they are not currently being included in the build. I hope my answer helps you, and if you have any questions I am here to help you.
Marked as helpful1@BarbarosTeomanPosted over 1 year ago@JAleXDesigN I really appreciate your return, I changed my code. Everything works fine.
1
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord