---
title: 'Pathing to Images in Flutter Web'
url: 'https://dowerchin.com/blog/pathing-images-in-flutter-web'
markdown: 'https://dowerchin.com/blog/pathing-images-in-flutter-web.md'
date: '2024-08-14'
description: 'In my adventures delving into Flutter for the Web, I came across an odd situation regarding images. Typically, you would store your images in an "assets" folder, and within this folder an "images" folder. In order to use the images in your Flutter app, you would add this directory to your pubspec.…'
taxonomy:
  category:
    - Flutter
  tag:
    - Flutter
---

# Pathing to Images in Flutter Web

In my adventures delving into Flutter for the Web, I came across an odd situation regarding images.

Typically, you would store your images in an "assets" folder, and within this folder an "images" folder. In order to use the images in your Flutter app, you would add this directory to your pubspec.yaml file with the following code:

```
flutter:
  assets:
    - assets/images/
```

Inside your application, you would use your images with the code below:

```dart
Image.asset("images/yourimage.png"),
```

All the while, not needing to specify "assets" in the path.

Below is an example of a simple app that has a Column with 2 Containers that uses an image in our assets/images folder.

```dart
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Web Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Web Image Demo'),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final String title;

  const MyHomePage({super.key, required this.title});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              width: 250,
              height: 250,
              decoration: BoxDecoration(
                border: Border.all(color: Colors.red, width: 5),
                image: const DecorationImage(
                  image: AssetImage("assets/images/egg.jpg"),
                  fit: BoxFit.cover,
                ),
              ),
            ),
            Container(
              width: 250,
              height: 250,
              decoration: BoxDecoration(
                border: Border.all(color: Colors.blue, width: 5),
                image: const DecorationImage(
                  image: AssetImage("images/egg.jpg"),
                  fit: BoxFit.cover,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}
```

The important part of this app is the **AssetImage** the first one has a red border and uses a full path, which includes the **assets** folder, **assets/images/egg.png**, The second image does NOT have the **assets**, **images/egg.png**.

Running the application either in Chrome or a simulator your images work fine.

![local_version](https://dowerchin.com/user/pages/01.blog/02.pathing-images-in-flutter-web/local_version.png "local_version")

Now it's time to build your application for the web to deploy to a host. In my case, I have to add a **base-href** because my web host has my accounts under a subfolder with my username. But if your host gives you access to the root of your URL, then you can skip the base-href.

```
flutter build web --base-href "/myusername/"
```

Running the above command will produce the files inside the **build/web** folder, which we need to upload to our web host. Once uploaded we can go to the web URL and see what happens.

![remote_version](https://dowerchin.com/user/pages/01.blog/02.pathing-images-in-flutter-web/remote_version.png "remote_version")

Do you notice something wrong?

Our second image, inside the blue border is empty. Why? If you recall, the second image does NOT use the **assets** folder in the URL.

```
AssetImage("images/egg.jpg")
```

Somehow, Flutter for Web actually puts the **images** folder inside another **assets** folder! If you look in the **build/web/assets** folder, you will see there is another **assets** folder!

![assets_folder](https://dowerchin.com/user/pages/01.blog/02.pathing-images-in-flutter-web/assets_folder.png "assets_folder")

This explains why using the reference to the image WITHOUT the **assets** folder breaks when published. So, in order to avoid this, you should reference all your images with a full path which includes the **assets** folder.

---

## Navigation

- Parent: [Home](https://dowerchin.com/index.md)
- Previous: [Logitech Keys-to-Go 2 Keyboard Review](https://dowerchin.com/blog/logitech-keys-to-go-2-keyboard-review.md)
- Next: [Cached Network Image](https://dowerchin.com/blog/cached-network-image.md)