我试图在 src 中动态给出图像名称。我想使用带路径的变量动态设置图像名称。但我无法正确设置 src。我在 stackoverflow 上尝试了解决方案，但没有任何效果。
我试图给出这样的路径
<img src={`../img/${img.code}.jpg`}></img>
<img src={'../img/' + img.code + '.jpg'}></img>
<img src={'../img/{img.code}.jpg'}></img>
如果我给出这样的路径，我的图像将保存在 src/img 路径中
<img src={require('../img/nokia.jpg')}/>
图像显示
我知道之前有人问过这个问题，但没有什么对我有用。请帮助我如何设置图像路径？
如果您不想需要图像，则必须将所有图像放入公共文件夹，然后
<img src={`../img/${img.code}.jpg`}></img>
这种方法会奏效。
你仍然可以使用 require
<img src={require(`./img/${img.code}.jpg`)}/>
不建议手动将图像添加到公共文件夹。在此处查看此答案：https : //stackoverflow.com/a/44158919/1275105
一个非常简单的解决方案：
// 图像.js
const images = [
{ id: 1, src: './assets/image01.jpg', title: 'foo', description: 'bar' },
{ id: 2, src: './assets/image02.jpg', title: 'foo', description: 'bar' },
{ id: 3, src: './assets/image03.jpg', title: 'foo', description: 'bar' },
{ id: 4, src: './assets/image04.jpg', title: 'foo', description: 'bar' },
{ id: 5, src: './assets/image05.jpg', title: 'foo', description: 'bar' },
...etc
];
export default images;
然后，您可以将它从另一个组件导入，如下所示：
// MyComponent.js
import images from './images'
//...snip
{ images.map(({id, src, title, description}) => <img key={id} src={src} title={title} alt={description} />)
动态需求似乎并不干净，而且 eslint 也不满意（不知道为什么）
如果图像存储在公共文件夹中的其他两种方法：
const imgNameWithPath = '/fullImageNameWithPath.jpg'
使用环境
<img src={process.env.PUBLIC_URL + imgNameWithPath} />
使用位置原点：
<img src={window.location.origin + imgNameWithPath} />
如果你们从数据库中获取多个图像的路径并且需要在单个标签中使用，则可以按照以下方法。第 1 步：请确保图像在公共文件夹中。第 2 步：更新您的路径应该从 public 而不是从 src 开始。第 3 步：确保验证路径应该像变量一样使用。如果您的图像路径应该在变量 imgPath 中使用。您可以使用像 var imgPath = '/img/pic.jpeg' "src={imgPath}" 这样的代码
我希望这能帮到您..