How to dynamically import images in create-react-app

Question

I am trying to pass a locally stored image name to a component via props. The problem is

<img src={require(`../assets/img/${iconName}.svg`)} />

is not working. I have bootstrapped the project using create-react-app. The component looks like this:

import React from 'react';

import best from '../../assets/img/best.svg';
import cashback from '../../assets/img/cashback.svg';
import shopping from '../../assets/img/shopping.svg';

const Card = ({iconName}) => {

    return (
        <>
            <img alt="icon" src={require(`../assets/img/${iconName}.svg`)} />
        </>
    );
};

export default Card;

SVGs are failing to load. Even if I write something like:

<img src={require('../assets/img/best.svg')} />
<img src={`${iconName}`} />

it doesn't work. Can this be an issue with webpack loader in CRA?

Kamil Janowski · Accepted Answer · 2020-05-16 11:45:22Z

1

Because those are SVGs, I imagine, there's a static number of images you might want to display. At this point you might need to import them all in the beginning. Depending on the tools that you're using around react the dynamic loading of data may or may not work. Your approach definitely would not work for instance with Next.JS (a framework around react).

so I would suggest just loading them all, putting into a map and using that instead of the dynamic require.

import React from 'react';

import best from '../../assets/img/best.svg';
import cashback from '../../assets/img/cashback.svg';
import shopping from '../../assets/img/shopping.svg';

const icons = Object.freeze({best, cashback, shopping});

const Card = ({iconName}) => (<img alt="icon" src={icons[iconName]} />);

export default Card;

answered May 16, 2020 at 11:45

Kamil Janowski

2,0652 gold badges24 silver badges48 bronze badges

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

1 Comment

Kamil Janowski Over a year ago

yeah, understanding how your framework works on a low level really helps :P if you're building a single page app, then once your code is compiled, there are no more imports/requires. This makes the dynamic imports rather difficult

Collectives™ on Stack Overflow

How to dynamically import images in create-react-app

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related