Question

我正在使用React创建一个应用程序，并且想导入图像，但是我不能只写<img src="path/filename.jpg" />

我有一个数组，其中包含存储库中图像的每个路径和文件名。数组的内容取决于存储库中的文件量。

我想创建一个库，其中包含库中的每个图像...但是当我动态获取图像的路径和文件名时（创建组件时），我不能像在文件顶部那样导入图像import img1 from "../images/.../image1.jpg" 目前，我有了数组（称为Gallerie），并且像这样遍历整个数组，但是图像未加载：

{this.state.gallerie.map((image, i) => {
    return (<img key={i} src={image}/>);
})}

如何显示图像及其路径？我应该将它们转换为Base64吗？

Answer 1

您可以尝试使用path将相对路径更改为绝对路径，以便您的应用可以正确获取图像。

import * as path from 'path';

{this.state.gallerie.map((image, i) => {
    const path = `${path.resolve(__dirname)}${image}`;

    return (<img key={i} src={path}/>);
})}

反应-导入多个图像

1 个答案: