Question

我在React中有一个组件，该组件显示src标签内的图像（或目前不显示）。

用户选择图片后，图片的文件路径和文件名会通过props传递，因此我无法在文件顶部进行导入。显然，我应该能够执行类似src = {require（file）}的操作，但这会导致webpack发出嘶嘶声并显示以下错误：错误：找不到模块“。”

例如，我传递给组件的典型文件路径/文件名是：'../../../ 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;

Answer 1

取决于您的设置...

如果图像是动态的（在生产过程中，图像将被添加，编辑或删除）：我建议使用仅处理图像的微服务。我将深入探讨如何提供这种服务：Image returned from REST API always displays broken

如果图像是静态的（在生产过程中，图像将捆绑在“ bundle.js”文件中）： -我建议将所有图像导入组件中，创建一个已导入图像的数组，然后利用数组索引和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

Answer 2

您不需要在src中添加require。当使用相对路径时，它将在您的服务器中可用图像，但是当给出url时将加载图像。您可以在此处找到更多信息

将src用作/images/black.jpg时，它将转换为localhost：3000 / images / black.jpg

当图像名称事先未知时，将图像导入React.js中的<src>标签

2 个答案: