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（围绕react的框架）绝对不起作用。

所以我建议只加载它们，放入地图中，然后使用它代替动态需求。

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;

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

1 个答案: