flutterfirebasedartfirebase-storage

The image I tried to display via Flutter NetworkImage is not displayed correctly


I apologize for the Korean language in the source code. I checked that the link is saved normally in firebase and delivered normally with the source code below.

                     {
                        print('');
                        print(card['info']['카드 이미지']);
                        print('');

                        return MissionCard(
                          logoPath: card['info']['카드 이미지'],
                          name: card['info']['카드 제목'],
                          description: card['info']['카드 설명'],
                          isRegistered: true,
                        );
                      }


...
...

      children: <Widget>[
            Image(
              image: NetworkImage(logoPath),
              height: 96,
              width: 96,
              fit: BoxFit.cover,
            ),

I verified that the image link is passed through the print statement as shown in the screenshot below. I also verified that the displayed link is displayed correctly when opened in Chrome.

Screenshot confirming that the image link is returned correctly to the terminal

This is the link.

However, the link I put in for testing, which returns a random image from the web, works fine, but my image link does not.

Screenshot capturing what it looks like

And it returns a message like the one below.

══╡ EXCEPTION CAUGHT BY IMAGE RESOURCE SERVICE ╞════════════════════════════════════════════════════
The following ProgressEvent$ object was thrown resolving an image codec:
  [object ProgressEvent]

When the exception was thrown, this was the stack

Image provider:
  NetworkImage("https://firebasestorage.googleapis.com/v0/b/samilgo.appspot.com/o/image%2F1680005913354%EB%8B%A4%EC%9A%B4%EB%A1%9
  C%EB%93%9C.jpg?alt=media&token=7c34e043-70c1-4db6-8f16-56ac0750331c",
  scale: 1)
Image key:
  NetworkImage("https://firebasestorage.googleapis.com/v0/b/samilgo.appspot.com/o/image%2F1680005913354%EB%8B%A4%EC%9A%B4%EB%A1%9
  C%EB%93%9C.jpg?alt=media&token=7c34e043-70c1-4db6-8f16-56ac0750331c",
  scale: 1)
════════════════════════════════════════════════════════════════════════════════════════════════════

Hopefully, the image will display normally. Please Help me


Solution

  • I have confirmed that this issue stems from a Cross-Origin Resource Sharing (CORS) error. I have resolved the issue via the official documentation below.

    https://cloud.google.com/storage/docs/cross-origin