我在 React 中有一个组件，它在 src 标签中显示（或目前不显示）图像。
图片的文件路径&文件名是用户选择后通过props传递的，所以我无法在文件顶部进行导入。显然，我应该能够做类似 src={require(file)} 的事情，但这会导致 webpack 发出嘶嘶声并给出以下错误：错误：找不到module“。”
例如，我传递给组件的典型文件路径/文件名是：'../../../images/black.jpg'
这是相关代码的精简版本：
import React, { Component } from "react";
class DisplayMedia extends Component {
render() {
return (
<div className="imgPreview">
<img src={this.props.file} alt="piccy" />
</div>
);
}
}
export default DisplayMedia;
根据您的设置...
如果图像是动态的（在生产过程中，图像将被添加、编辑或删除）：我建议使用仅处理图像的微服务。我深入研究了如何处理这样的服务：从 REST API 返回的图像总是显示损坏
如果图像是静态的（在生产过程中，图像捆绑在“bundle.js”文件中）： - 我建议导入组件中的所有图像，创建导入图像的数组，然后使用该数组index 和 React 状态来循环它们。例如：
import React, { Component } from "react";
import Image1 from "../images/Image1.png";
import Image2 from "../images/Image2.png";
import Image3 from "../images/Image3.png";
const images = [Image1, Image2, Image3];
export default class ShowImage extends Component {
state = { index: 0 };
handleChange = ({ target: { value } }) => {
this.setState({ index: value });
};
render = () => (
<div className="container">
<h1>Utilizing Array Indexes</h1>
<select
style={{ marginBottom: 20 }}
value={this.state.index}
onChange={this.handleChange}
>
{images.map((val,idx) => (
<option key={idx} value={idx}>Image {idx + 1}</option>
))}
</select>
<img src={images[this.state.index]} />
</div>
);
}
虽然我无法创建上述的确切代码和框，但这个工作示例应该给你基本的想法：https ://codesandbox.io/s/ovoo077685
您不需要在 src 中添加 require。当使用相对路径时，它会在您的服务器中访问可用的图像，但是当给定 url 时，图像将被加载。你可以在这里找到更多信息
当使用 src 作为 /images/black.jpg 时，它将转换为 localhost:3000/images/black.jpg