javascript - 如何在 create-react-app 中动态导入图像
问题描述
我正在尝试通过道具将本地存储的图像名称传递给组件。问题是
<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 加载器的问题吗?
解决方案
因为这些是 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;
推荐阅读
- r - 按组内出现的顺序排列值
- php - 如何用逗号替换点,但仅用于字符串中的数字?(PHP)
- javascript - 使用 marqee.js 插件并尝试在异步调用的 css 反射的两个(三个??)状态之间切换(ie.ajax)
- sql - 我可以在没有源列名称成为 SQL Server 2016 中的键的情况下使用 FOR JSON 吗?
- scrapy - How do I grab the headline titles from the Google News webpage with Scrapy?
- javascript - 有没有办法使用 Jquery 的下一个表达式来确定表行是子行还是父行?
- python - 如何让 flake8 忽略 ipdb 导入?
- terraform - error trying to create a list: expected type 'string', got unconvertible type '[]interface {}'
- windows - 在不提供凭据的情况下,无法使用 (win_)uri 模块从 API 检索信息
- python - Module attribute update is not propagated to child processes on Windows