如何在 create-react-app 中动态导入图像

Question

我正在尝试通过道具将本地存储的图像名称传递给组件。问题是

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

不工作。我已经使用 create-react-app 引导了该项目。该组件如下所示：

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;

SVG 无法加载。即使我写了这样的东西：

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

它不起作用。这可能是 CRA 中的 webpack 加载器的问题吗？

Answer 1

因为这些是 SVG，我想，您可能想要显示的图像数量是静态的。 此时，您可能需要在开始时将它们全部导入。根据您在反应周围使用的工具，数据的动态加载可能会或可能不会起作用。例如，您的方法肯定不适用于 Next.JS（一个围绕反应的框架）。

所以我建议将它们全部加载，放入地图并使用它而不是动态需求。

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;