Question

我从数据库中获取图像的路径。图像文件存储在本地。我将路径存储为组件的状态，从而保持组件动态，而不是简单地从路径的位置导入路径。所以......

这有效......

  render() {
    return (
      <div>
        <Col xs={6} md={4}>
          <Image src={require('../../../../public/uploads/file-1516414373384.png')}responsive />
        </Col>
      </div>
    )

然而，这不是......

class Reports extends Component {
  constructor(props) {
    super(props);
    this.state = {
      reports: [],
      photos: null
    }
  }

  componentWillMount() {
    var reports = []
    axios.get('/uploadUserImage')
      .then( (response) => {
        response.data.forEach(function(report){
          reports.push(report)
        })
      }).then(() => {
        this.setState({reports})
      }).then(() => {
        var path = '../../../../'+this.state.reports[0].file;
        var rightPath = path.replace(/\\/g,"/");
        this.setState({photos: rightPath})
      })
      .catch( (error) => {
        console.log(error);
      });
  }

  render() {
    return (
      <div>
        <Col xs={6} md={4}>
          <Image src={require(this.state.photos)}responsive />
        </Col>
      </div>
    )

即使第二个非工作代码与第一个工作代码编译相同。

我收到错误消息

  Uncaught Error: Cannot find module "."

所以我的网络包可能有问题吗？但如果这是真的，两种情况都不会抛出错误???

我也尝试过模板文字......

<Image src={require(`${this.state.photos}`)}responsive />

对于类似问题的答案，但没有骰子 - 同样的错误。

Answer 1

我认为，这是因为它第一次尝试导入路径null的图像（状态中路径的初始值），只有在从服务器获得成功响应后，它才会有正确的图像路径。 / p>

一种可能的解决方案是，只有在获得响应后有有效路径时才渲染图像，使用条件渲染并进行检查。

像这样：

{this.state.photos ? <Image src={require(this.state.photos)} responsive /> : null}

Answer 2

这是OP。我尝试了这里和其他类似问题的所有建议。没有任何效果。我安装了react-image，现在一切正常。

希望我可以解释一下幕后发生了什么，以及之前究竟出了什么问题，但我真的不知道。图像现在通过组件状态进行渲染。所以，我猜是胜利。

Answer 3

我遇到了一个类似的问题，发现这在我的项目中有效：

  import React, { Component } from 'react';

    class ImageUpload extends Component {
      constructor(props) {
       super(props);
       this.state = {
       file: null
     };
     this.handleChange = this.handleChange.bind(this);
     }
    handleChange = e => {
     this.setState({
     file: URL.createObjectURL(e.target.files[0])
    });
    };

   render() {
   const fileAttached = this.state.file;
   return (
     <div>
        <input type="file" onChange={this.handleChange} />
        {fileAttached ? (
           <img
              src={this.state.file}
              alt="File Uploaded"
              height="300"
              width="400"
           />
          ) : (
           <img src="" alt="No file uploaded" />
        )}
       </div>
    );
 }

}

export default ImageUpload;

无法在React / JSX

3 个答案: