CODEWITHSUNDEEP
javascript
Atishay Srivastava
Atishay Srivastava

Reputation: 1

Why does the console giving Error: Cannot import an empty path?

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>
  <body>
    <div><img alt="no photo" src="" /></div>

    <script>
      const myImage = document.querySelector("img");

      let myReq = new Request("903178.jpg");

      fetch(myReq)
        .then(response => {
          console.log(response); //*no output in console*
          return response.blob();
        })
        .then(response => {
          let objectURL = URL.createObjectURL(response);
          myImage.src = objectURL;
        });
    </script>
  </body>
</html>

I have fetched image from same folder to render on html page but the error is showning in the console

Error: Cannot import an empty path CodeSandBox Link - https://codesandbox.io/s/hardcore-river-re84i?file=/index.html

Upvotes: 0

Views: 1253

Answers (1)

Maya Davis
Maya Davis

Reputation: 427

Based on codesandbox code that you provided, the issue is that you are adding an empty src="" in your image. All you need to do to get the code working is to either not give it initial src or put something in it like src="#"

<body>
<div><img alt="no photo" /></div>

<script>
  const myImage = document.querySelector("img");
  let myReq = new Request("903178.jpg");

  fetch(myReq)
    .then(response => {
      return response.blob();
    })
    .then(response => {
      let objectURL = URL.createObjectURL(response);
      myImage.src = objectURL;
    });
</script>

Upvotes: 2

Related Questions