how to show image in react js?

Question

I am trying to show image as a BLOB but it is not working it is not showing image.I am fetching an image convert it in BLOB. and show in img tag. but it is not showing image . why ? I am able to convert BLOB url but it is not showing why ?

import "./styles.css";
import {useEffect, useState} from "react";
import axios from "axios";
export default function App() {
    const [state, setState] = useState(null)
    useEffect(async ()=>{
    var res=await  axios({
            method: 'get',
            url: 'https://www.oracle.com/node/oce/storyhub/dev/api/v1.1/assets/CONT0AE22311201E4708BEC9FBEC9C7096D8/native',
            responseType: 'stream'
        })
        if (res) {
            console.log(res)
            // const imgBlob = window.URL.createObjectURL(res);
            var binaryData = [];
            binaryData.push(res.data);
            const imgBlob = window.URL.createObjectURL(new Blob(binaryData, {type: "image/png"}))
            console.log(imgBlob)
             setState(imgBlob);
        } else {
            resolve({});
        }
    },[])
  return (
    <div className="App">
        <img src={state}/>
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

Answer 1

You can just directly use the URL as the src without going through the extra steps to convert it to a blob.

const { useEffect, useState } = React;

function App() {
 const src = "https://www.oracle.com/node/oce/storyhub/dev/api/v1.1/assets/CONT0AE22311201E4708BEC9FBEC9C7096D8/native";
  return (
    <div className="App">
      <img src={src} />
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js" integrity="sha512-bZS47S7sPOxkjU/4Bt0zrhEtWx0y0CRkhEp8IckzK+ltifIIE9EMIMTuT/mEzoIMewUINruDBIR/jJnbguonqQ==" crossorigin="anonymous"></script>
<div id="root" />

Easiest option to use a blob is to just use responseType: 'blob'

const { useEffect, useState } = React;

function App() {
  const [state, setState] = useState(null);
  useEffect(() => {
    axios({
      method: "get",
      url:  "https://www.oracle.com/node/oce/storyhub/dev/api/v1.1/assets/CONT0AE22311201E4708BEC9FBEC9C7096D8/native",
      responseType: "blob",
    }).then((res) => {
      if (res) {
        setState(window.URL.createObjectURL(res.data));
      }
    });
  }, []);
  return (
    <div className="App">
      <img src={state} />
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js" integrity="sha512-bZS47S7sPOxkjU/4Bt0zrhEtWx0y0CRkhEp8IckzK+ltifIIE9EMIMTuT/mEzoIMewUINruDBIR/jJnbguonqQ==" crossorigin="anonymous"></script>
<div id="root" />