Flutter Question posted in
The official Flutter documentation can be found here.

Asset images not displaying in flutter

I have uploaded the images to asset folder and updated the pubspec.yaml file too. But the images are not displaying and pubspec.yaml file shows an error.

.yaml error
The asset file ‘assets/warning_lights/tpms.jpg’ doesn’t exist.
Try creating the file or fixing the path to the file.

Folder structure and error
(https://i.sstatic.net/rdTNFvkZ.png)

I have reuploaded the images and tried changing the image type too.

Tags:

3

Answers


  1. 0

    Remove the assets files from lib and place it in root folder of the project. means lib and assets folders will be at same level. like this

    project_name/
├── assets/
├── lib/
│   └── main.dart  // Application entry point
├── pubspec.yaml  // Project configuration file
└──
    Login or Signup to reply.
  2. 0

    what you have done wrong in your folder structure is that you have placed the assets folder inside the lib folder.
    the assets folder should always be placed outside
    hust like in the picture

    and you will be good to go
    and also instead of including every images in pubsec.yaml you can simply put assets/ or any folder inside if added and you can access it to with the same path you have used in your code

    Login or Signup to reply.
  3. 0

    You’re facing this issue because of incorrect paths in the pubspec.yaml. You can resolve this issue by following these two solutions:

    Solution 1:

    Add lib/ before your assets paths. Because you have put the assets under the lib directory. More ever you if you want to include all the assets of warning_lights directory you can simply do it like this:

    flutter:
  assets:
    - lib/assets/warning_lights/

    No need to add a full path to each image.

    Solution 2: Recommended

    You should move the assets dirctory to root level of the proejct. i.e. The lib directory and the assets directory should be on the same level.

    project/
├── assets/
├── lib/
├── pubspec.yaml  // Project configuration file
└──

    Then in your pubspec.yaml:

    flutter:
  assets:
    - assets/warning_lights/

    The concept is that the flutter searches for the directory paths relative to the pubspec.yaml file. So you have to be careful when adding any paths in the pubspec.yaml

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search