@JAleXDesigN
Posted
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 helpful