<img>标签没有拉起作为道具传递的图像

Question

I created one data file and I added Img name as one object. [data.js]: https://i.stack.imgur.com/qG385.png In fact, these images are also stored in the Image folder of my project. But when I pass this data through Component as props, the image is not loading up - [Props data]: https://i.stack.imgur.com/AHByK.png [Props]: https://i.stack.imgur.com/66Jqk.png

Console also shows that the Img data is getting pulled correctly: [Console]: https://i.stack.imgur.com/5Pkbt.png

If I manually enter img address under src the img gets pulled properly. Why I am not able to use it using props?

Answer 1

In React, image tags are a bit different. This isn't really React's fault, but more a problem of where the images will reside on the server after the app is built.

Two Ways to Include an Image in a React Component

With React, since there's a build step, you need a way to include the image. There are 2 main ways to do that.

Option 1: import the image into the component

Put the image file somewhere under the src folder. This alone will not automatically make it available, so you have to import the image into the React component where you're using it. Wherever you want to display the image, render your img tag and pass that variable as the src:

import katie from "../../Images/katie-zaferes.png";

function ImageExample () {
   return <img src={katie} alt="Katie profile" />
}

Option 2: Put the image in the public directory

You can put the image file in the public folder (or if this is not Create React App… then any folder that will be copied to the server).

Then, assuming your server is treating the public folder as the “root” directory (/), then your images will be available relative to that – just like with plain HTML.

So if you had an image at public/images/wedding-photography.png , you could display that image this way:

function Home() {
  return (
    <div>
      <img src="images/wedding-photography.png" alt="Wedding photography example"/>
    </div>
  );
}