Search code examples
flutter-web

Flutter web svg image will not be displayed after Firebase hosting


Svg images do not appear after hosting. Consolos scan shows that svg files are downloaded. But it doesn't appear. Can anyone help me with this?

I have already built the web app in both html and canvaskit, but it doesn't work in either. I can only see the svg images on localhost.

I use the https://pub.dev/packages/flutter_svg package.

I use a Firebase hosting service.

enter image description here => localhost

enter image description here => hosting


Solution

  • I found a solution to diplay the current svg/png correctly after Firebase Deploy.

    There's something wrong with flutter after we run flutter build web. The respective assets, should be moved into /web directory (on build folder you can check items before do the deploy). But, they are not moved in.

    So, in my case, I've removed all assets (png's or svg's) from the root project /assets and set them into the /web/assets folder (mannually)!

    This is the automatic process that flutter do after you run flutter build web.

    Just pay attention with the declaration of the assets in the pubspec.yaml file. The files must be matching the path for the web folder.

    Example:

    pubspec.yaml

    assets:
        - assets/
    

    using the svg icon (without the /assets):

     myIcon.svg
    

    Try it. It should work.