Dynamic loading of images in 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>
    )
}

The value of src needs to be the path to your image as a string. You shouldn't use require in there. developer.mozilla.org/en-US/docs/Web/HTML/Element/img — jmargolisvt
– jmargolisvt, Commented Oct 23, 2021 at 2:52
I'd also try to console.log({data}) in populateItems to make sure getItems() is working properly. — Joseph Cho
– Joseph Cho, Commented Oct 23, 2021 at 2:53
@JosephCho Yup I was able to retrieve information back from the database, only field that was giving me trouble was the image unfortunately — Jeremy Chee
– Jeremy Chee, Commented Oct 23, 2021 at 4:16
@jmargolisvt so something like <img src={../../images/${item.name}.png} alt={item.examine} /> wouldn't work either? — Jeremy Chee
– Jeremy Chee, Commented Oct 23, 2021 at 4:21

Joseph Cho · Accepted Answer · 2021-10-25 03:33:39Z

4

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 take 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 (e.g. 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.

edited Oct 25, 2021 at 3:33

answered Oct 23, 2021 at 4:51

Joseph Cho

4,2444 gold badges29 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jeremy Chee Over a year ago

I was actually able to retrieve the image dynamically by placing the path of the image in a variable then inserting that variable into the src path of the image. const imageItem = /images/${item.name}.png; <img src={imageItem} alt={item.examine} />

Joseph Cho Over a year ago

@JeremyChee nice job. Don't forget the reason it works is because you're already serving public files (e.g. /images/schimitar.png). Later on with different frameworks and codebases it'll be important to know. For example Next.js has a built in /public directory, but in Angular it's /dist.

Jeremy Chee · Accepted Answer · 2021-10-24 03:39:24Z

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;

Nimantha · Accepted Answer · 2021-11-26 03:25:39Z

0

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

edited Nov 26, 2021 at 3:25

Nimantha

6,5156 gold badges32 silver badges78 bronze badges

answered Oct 23, 2021 at 2:57

Ram Rana

2041 silver badge6 bronze badges

1 Comment

nima Over a year ago

a side note just for improvement: While this code may answer the question, providing additional context regarding how and/or why it solves the problem would improve the answer's long-term value. You can find more information on how to write good answers in the help center: stackoverflow.com/help/how-to-answer . Good luck 🙂

Codemaker2015 · Accepted Answer · 2021-11-28 09:31:42Z

-1

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>
)

answered Nov 28, 2021 at 9:31

Codemaker2015

16k9 gold badges118 silver badges93 bronze badges

Collectives™ on Stack Overflow

Dynamic loading of images in React JS

4 Answers 4

2 Comments

Comments

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

1 Comment

Comments

Related