Search code examples
imageflutterflutter-web

Flutter won't load a particular image


When I try to load this image from Unsplash from local (located in assets/images/), nothing shows up and there is no error reported. When I change the image source to network, the image loads perfectly fine(but slower).
Does not work:

Container(
     decoration: BoxDecoration(
          image: DecorationImage(
             image: AssetImage("assets/images/image.jpg"),
             fit: BoxFit.cover))

Works:

Container(
     decoration: BoxDecoration(
         image: DecorationImage(
             image: NetworkImage("https://source.unsplash.com/zuueig1w8WI/"),
              fit: BoxFit.cover)),

Currently using Flutter Web.

Edit Image is already in pubspec.

name: website
description: Wesbite

# The following line prevents the package from being accidentally published to
# pub.dev using `pub publish`. This is preferred for private packages.
publish_to: "none" # Remove this line if you wish to publish to pub.dev

# The following defines the version and build number for your application.
# A version number is three numbers separated by dots, like 1.2.43
# followed by an optional build number separated by a +.
# Both the version and the builder number may be overridden in flutter
# build by specifying --build-name and --build-number, respectively.
version: 2.0.0+1

environment:
    sdk: ">=2.7.0 <3.0.0"

dependencies:
    flutter:
        sdk: flutter
    auto_size_text: ^2.1.0
    cached_network_image: ^2.5.0
    firebase_analytics: ^6.3.0
    font_awesome_flutter: ^8.11.0
    google_fonts: ^1.1.1
    http: ^0.12.2
    provider: ^4.3.2+3
    url_launcher: ^5.7.10
    velocity_x: ^1.3.1

dev_dependencies:
    flutter_test:
        sdk: flutter
# The following section is specific to Flutter.
flutter:
    assets:
        - assets/images/
        - assets/licenses/

    # The following line ensures that the Material Icons font is
    # included with your application, so that you can use the icons in
    # the material Icons class.
    uses-material-design: true


Solution

  • Check the file extension in your assets folder.

    The source image is .jfif which, although compatible, could mean flutter cannot find the file as its looking for image.jpg