Img is not displaying in img tag reactjs

Question

I'm saving my img in the state and database and I'm trying to pass it as a src in my img tag but it's rendering nothing. Any suggestions?

const fileselectedHandler = (event : any) => {
    newImg(event.target.files[0])
}

    const [img,newImg] = useState()

            <img src={img} />

The `src` attribute can't take a raw file, but you could convert it to a [data-url](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs) if it needs to be included in the `src` — DBS, Jul 06 '20 at 11:03
There are quite a few good answers already covering that, I would recommend having a look at [this one](https://stackoverflow.com/a/20285053/1650337) — DBS, Jul 06 '20 at 11:07

score 1 · Answer 1 · answered Jul 06 '20 at 11:04

1

The problem is here,

const [img,newImg] = useState()

You are using state with def value of null which gets passed to img tags src attr, AND thus nothing you see, And also because you didn't add any alt you dont see any img load failed text..

answered Jul 06 '20 at 11:04

ezio4df

3,541
6
16
31

score 1 · Accepted Answer · answered Jul 06 '20 at 11:09

From the backend it depends on how the data is being sent, from the Frontend if you're just looking for to access the image from the input field then this would be the implementation.

TL;DR Click Run Code Snippet below to see it working.

I also have a couple of articles I wrote on the topic:

Links:

Download API Files With React & Fetch

Build A React Drag & Drop Progress File Uploader

// main.js
const { useState } = React;

const App = () => {
  // State / Props
  const [preview, setPreview] = useState(null);
  
  // Functions
  const onInputFileChange = event => {
    // reset each time
    setPreview(null);
    
    // Define supported mime types
    const supportedFilesTypes = ['image/jpeg', 'image/png'];
    
    if (event.target.files.length > 0) {
      // Get the type of the first indexed file
      const { type } = event.target.files[0];

      if (supportedFilesTypes.indexOf(type) > -1) {
        const reader = new FileReader();
        reader.onload = e => { setPreview(e.target.result); };
        reader.readAsDataURL(event.target.files[0]);
      }
    }
  };
  
  return (<div><h1>Choose an image</h1><input onChange={onInputFileChange} type="file" name="file" />{preview && <img src={preview} />}</div>);
};


ReactDOM.render(<App />, document.getElementById('root'));

body {
  padding: 10px;
  font-family: Arial, sans-serif;
}

h1 {
  font-size: 18px;
  margin: 0 0 10px 0;
}

input {
  background: #efefef;
  margin-bottom: 10px;
  padding: 6px;
  border-radius: 4px;
}

img {
  max-width: 600px;
  height: auto;
  border: 4px solid #ccc;
 }

<body>
<div id="root"></div>

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

<script type="text/babel" src="main.js"></script>
</body>

Img is not displaying in img tag reactjs

2 Answers2