title: Get image from Java spring to show in React
body: <p>I am trying to understand how to get an image from an <code>Java Spring</code> back-end to show in a small <code>React</code> app.</p>
  
  <p>In <code>React</code>, I am trying to set an <code>img src</code> to the <code>image-data</code> using this code:</p>
  
  <pre><code>const [image, setImage] = useState("");
  const onClickHandler = async () =&gt; {
      const result = await fetch("http://localhost:8080/gallery/test", {
        mode: "no-cors", // 'cors' by default
      });
      const blob = await result.blob()
      const url = await URL.createObjectURL(blob);
      setImage(url)
      console.log(url)
  }
  </code></pre>
  
  <p>But <code>console.log</code> shows this info: </p>
  
  <pre><code>blob:http://localhost:3000/620ccbb6-31e5-4a2c-9a61-540beba10d8e
  </code></pre>
  
  <p><code>Controller</code> code:</p>
  
  <pre><code>@Controller
  @RequestMapping("/")
  public class GalleryController {
      protected final GalleryService galleryService;
  
      @Inject
      public GalleryController(GalleryService galleryService) {
          this.galleryService = galleryService;
      }
  
      @GetMapping(value = "gallery/test")
      public @ResponseBody byte[] getImage() throws IOException {
          return IOUtils.toByteArray(getClass()
              .getResourceAsStream("/gallery/test/test.jpg"));
      }
  }
  </code></pre>
  
  <p>And if I open <code>http://localhost:8080/gallery/test/</code>, I get this:</p>
  
  <p><a href="https://i.stack.imgur.com/5vzzY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5vzzY.png" alt="enter image description here"></a></p>