Can't render image from state in React/JSX

Question

I'm getting the path to an image from my database. The image file is stored locally. I store the path as State for the component thus keeping the component dynamic as opposed to simply importing the path form it's location. So...

this works...

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

However, this does not...

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>
    )

Even though the second non-working code compiles to the same this as the first working bit of code.

I get an error that says

  Uncaught Error: Cannot find module "."

So maybe there is something wrong in my web-pack? but if that were true wouldn't both cases throw the error???

I also tried template literals...

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

As was the answer to a similar question, but no dice - Same error.

you don't need the require here: src={require(this.state.photos)}, access the state directly ? — Lafi, Jan 20 '18 at 17:52
Oh yeah, I should have added this to the original question.... If I leave out the require method and just do src={this.state.photots} I get a 404. Even though the path is exactly the same as it is in the require method that does work. — DoubleTri, Jan 20 '18 at 18:46

score 1 · Answer 1 · answered Jan 20 '18 at 17:51

1

I think, this is because first time it trying to import image of path null (initial value of the path in state), only after getting successful response from server, it will have the correct image path.

One possible solution is, render the image only when you have a valid path means after getting response, Use conditional rendering and put the check.

Like this:

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

answered Jan 20 '18 at 17:51

Mayank Shukla

100,735
18
158
142

got the solution or still facing the issue? – Mayank Shukla Jan 20 '18 at 18:50
Hey Mayank, I didn't think of that. But, no. Still throws the same error. And when I inspect the component with Chrome's React tool, it shows State.photos = the correct path. So everything is doing what's it supposed to accept the img element seems to hate State. :( – DoubleTri Jan 20 '18 at 18:53

DoubleTri · Accepted Answer · 2018-01-22T15:44:02.590

1

It’s OP. I tried everything suggested here and in other similar questions. Nothing worked. I installed react-image and now everything works fine.

Wish I could give an explanation as to what’s going on under the hood, and what exactly went wrong before, but I don’t really know. Images do render now via component state. So, victory I guess.

edited Jan 22 '18 at 15:44

answered Jan 21 '18 at 17:46

DoubleTri

861
1
7
14

score -1 · Answer 3 · answered Apr 11 '19 at 15:14

I was running into a similar issue and found this to work in my project:

  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;

Can't render image from state in React/JSX

3 Answers3