Responsive bookmark page

Community feedback

• 

  Alex Holguin•410

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

  1

  ---

  

  Barbaros Teoman Kosoglu•210

  @BarbarosTeomanPosted over 1 year ago

  @JAleXDesigN I really appreciate your return, I changed my code. Everything works fine.

  1