React JS 中图片的动态加载

Question

I am trying to dynamically get images from my images folder based on some information retrieved from the database. Gone through as many resources as I could but still unable to solve the problem. Here's my code:

import scimitar from "../../images/scimitar.png";
import defender from "../../images/defender.png";
import arrows from "../../images/arrows.png";
import cape from "../../images/cape.png";
import platebody from "../../images/platebody.png";

const ItemCard = ({ item }) => {


    return (
        <div>
            <p key={item.id}>ID: {item.id}</p>
            <p>Name: {item.name}</p>
            <p>{item.examine}</p>
            <p>
                <Link to={`/items/${item.id}`}>{item.name}</Link>
            </p>

            <img src={require(item.name)} alt={item.examine} />
        </div>
    )
}

const ItemList = () => {
    const [items, setItems] = useState(null);

    const populateItems = async () => {
        const data = await getItems();
        setItems(data);
    };

    useEffect(() => populateItems(), []);


    return (
        <div>
            {items &&
                items.map((item, index) => (
                    <ItemCard item={item} key={index} />
                ))
            }
        </div>
    )
}

Answer 1

        <img src={item.name} alt={item.examine} />

Answer 2

It looks like there are a couple of issues going on. Using template literals like

<img src={`../../images/${item.name}.png`} alt={item.examine} />

won't work either. The reason why is src doesn't taken in a path to picture, it looks at a url your website uses. You'll need to setup your React app to serve public images (eg make sure something like localhost:1337/images/schimitar.png works).

Only then can you reference it using

<img src={`/images/${item.name}.png` />

To serve static files in create-react-app check out this link. If you have another setup you'll need to use something like babel-plugin-file-loader to serve public assets.

Answer 3

Not sure why this worked but I placed the path of the image in a variable before passing it to the src path of the image tag.

const ItemCard = ({ item }) => {
const imageItem = `/images/${item.name}.png`;

return (
    <div>
        <p key={item.id}>ID: {item.id}</p>
        <p>Name: {item.name}</p>
        <p>{item.examine}</p>
        <span>Quantity: {item.quantity}</span>
        <p>
            <Link to={`/items/${item.id}`}>{item.name}</Link>
        </p>
        <img src={imageItem} alt={item.examine} />

    </div>
  )
}
export default ItemCard;

Answer 4

Try the following code if you are trying to get the image from a static path.

import image1 from 'images/image1.png';

<img src={image1} alt="image1" />

If you are trying to dynamically add the image then try the following code,

const imgName = "image1.png"

return (
    <div>
         { imgName && <img src={`images/${imgName}`} alt="imgName" /> }
    </div>
)