SRC文件夹中图片的动态URL

Question

我有一些存储空间的图片在src文件夹:

const pictures: Array<CarouselPicture> = [
{
index: '1',
url: '../../data/carousel/carousel1.png',
description: ''
}
export default pictures;

url是正确的对于这个文件我可以毫无问题地拿到我所有的照片。此外，我还有一个组件，其中使用了此存储:

import pictures from './CarouselData'
export default class ImageContainer extends Component {
render() {
return (
<div className='carousel_image-container'>
{pictures.map((pic) => {
return (
<div key={pic.index}>
<img src={pic.url}></img>
</div>
)})}
</div>
)
}
}

对于这个组件的URL是不正确的，我无法达到我的图片。我该如何解决这个问题?我想在我的存储中写入URL，然后在我的项目中不同文件夹的几个不同组件中使用存储，而不改变我的图片的URL。换句话说，我想动态地获取路径

我明白{pic。url}是不正确的，但我不知道如何正确编程。

PS:因此这里有一些问题，最好将图片存储在src文件夹中，而不是在公共场合，所以我猜'process.env. '。PUBLIC_URL'不是解决方案(但谁知道呢)。

Answer 1

由于webpack配置，url: '../../data/carousel/carousel1.png',或内联<img src="../../data/carousel/carousel1.png"/>通常用于url: 'https://external/image/link.png'等外部链接

在您的情况下，您应该尝试require('../../data/carousel/carousel1.png')或import carousel1 from '../../data/carousel/carousel1.png'

Answer 2

当使用public/文件夹时，您使用process.env.PUBLIC_URL的预感是正确的。假设您的图像位于public/data/:

const pictures: Array<CarouselPicture> = [
{
index: '1',
url: `${process.env.PUBLIC_URL}/data/carousel/carousel1.png`,
description: ''
}
]

正如你所说的，你也可以用不同的方式把你的图像移动到你的src/文件夹。哪一个都可以。

这些可以位于src/中的任何位置，您可以使用正常的导入规则导入它们:

import carousel1 from './images/carousel1.png'
import carousel2 from './images/carousel2.png'
const pictures: Array<CarouselPicture> = [
{
index: '1',
url: carousel1,
description: ''
},
{
index: '1',
url: carousel2,
description: ''
}
]

Answer 3

创建一个文件，将图像导出为变量像这样。例如,imageExporter.js

export const imageA = {id:1, url:"./your correct relative path for image",  description: 'some description'};

和在你的组件导入这些图像作为变量，并使用它们作为图像源

import {imageA} from './ imageExporter.js path here'

and then
<img src={imageA.url} />