title: Why use `URL.createObjectURL(blob)` instead of `image.src`?
body: <p>Q1. In the context of asynchronous JavaScript and the need to ‘fetch’ data from the <strong>client-side</strong>, why can’t we just edit our image elements by its attribute <code>src</code>?</p>
  
  <p>Q2. Why is the Blob conversion process necessary to go through? </p>
  
  <p>Q3. What is the blob role?</p>
  
  <p>e.g. Retrieving image file from JSON. (BTW, I extracted it from MDN webpage, mind the comments)</p>
  
  <pre><code>
    function fetchBlob(product) {
      // construct the URL path to the image file from the product.image property
      let url = 'images/' + product.image;
      // Use fetch to fetch the image, and convert the resulting response to a blob
      // Again, if any errors occur we report them in the console.
      fetch(url).then(function(response) {
          return response.blob();
      }).then(function(blob) {
        // Convert the blob to an object URL — this is basically an temporary internal URL
        // that points to an object stored inside the browser
        let objectURL = URL.createObjectURL(blob);
        // invoke showProduct
        showProduct(objectURL, product);
      });
    }
  
  </code></pre>