如何在React JS中动态提供Image src？

Question

我正在尝试动态指定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')}/>

图片正在显示

我知道之前曾问过这个问题，但对我来说没有任何帮助。请帮我如何设置图像路径？

Answer 1

你仍然可以使用 require

<img src={require(`./img/${img.code}.jpg`)}/>

不建议手动将图像添加到公共文件夹。在此处查看此答案：https : //stackoverflow.com/a/44158919/1275105

Answer 2

如果您不想要该图像，则必须将所有图像放入公用文件夹，然后

<img src={`../img/${img.code}.jpg`}></img>

此方法将起作用。

Answer 3

一个非常简单的解决方案：

// 图片.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} />)