title: Flutter web - Failed to load network image
body: <p>I have images in my project's firebase storage bucket that I would like to display in the UI.
  I followed the instructions from another stack overflow answer, but it didn't work for me.</p>
  <blockquote>
  <p>For being able to display your images from Firebase Storage on a
  Flutter web page you have to configure your data for CORS.</p>
  <p>Open the GCP console, select your project and start a cloud terminal
  session by clicking the &gt;_ icon button in the top navbar. Click the
  open editor button (pencil icon), then create the cors.json file. Run
  gsutil cors set cors.json gs://your-bucket The cors.json file should
  look like this:</p>
  <p>[   {
  &quot;origin&quot;: [&quot;*&quot;],
  &quot;method&quot;: [&quot;GET&quot;],
  &quot;maxAgeSeconds&quot;: 3600   } ] I set the origin to * which means that every website can display your images. But you can also insert the
  domain of your website there to restrict the access.</p>
  <p>If you need more information:
  <a href="https://cloud.google.com/storage/docs/configuring-cors" rel="nofollow noreferrer">https://cloud.google.com/storage/docs/configuring-cors</a></p>
  </blockquote>
  <p>I see on cloud platform my project and the update to the bucket but I get the same error message:</p>
  <pre><code>Failed to load network image.
  Image URL: gs://---------------------------------.png
  Trying to load an image from another domain? Find answers at:
  https://flutter.dev/docs/development/platform-integration/web-image
  </code></pre>
  <p>I also followed this guy's tutorial on how to access your storage images. He used the Image.network widget, which is what I'm doing as well. It just does not work for me. The screenshot below is what I see. The black boxes are the URLs from storage location.</p>
  <p><a href="https://i.stack.imgur.com/QPARU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QPARU.png" alt="enter image description here" /></a></p>