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

Flutter web : Error while trying to load an asset: Flutter Web engine failed to fetch "assets/"

I have a flutter web application … when I run it I get an uncaught exception Error while trying to load an asset: Flutter Web engine failed to fetch "assets/". HTTP request succeeded, but the server responded with HTTP status 404.

when I click continue the screen opens and the images are loaded without any problem

flutter:
  uses-material-design: true
  assets:
    - assets/images/
    - assets/translations/

Expanded(
          child: Container(
            padding: const EdgeInsets.symmetric(vertical: 24, horizontal: 16),
            width: widget.isExpanded ? 310 : 100,
            decoration: const BoxDecoration(
              image: DecorationImage(
                image: AssetImage(
                  AssetsData.menuBackground,
                ),
                alignment: Alignment(0.65, .72),
                fit: BoxFit.none,
                scale: 2.5,
                repeat: ImageRepeat.noRepeat, // Prevent image repetition
              ),
            ),
            child: SideMenuList(
              isExpanded: widget.isExpanded,
            ),
          ),
        ),

class AssetsData {
  // Translation
  static const enTranslation = 'assets/translations/en.json';
  static const arTranslation = 'assets/translations/ar.json';

  // Images
  static const logo = 'assets/images/logo.png';
  static const circles = 'assets/images/circles.gif';
  static const menuBackground = 'assets/images/bs.jpg';
  static const avatar = 'assets/images/avatar.png';
  static const masterData = 'assets/images/master_data_icon.svg';
  static const salesTransactionsIcon =
      'assets/images/sales_transactions_icon.svg';
  static const supportIcon = 'assets/images/support_icon.svg';
  static const mainPurchaseOrder = 'assets/images/main_purchase_order_icon.svg';
  static const uploadIcon = 'assets/images/upload_icon.svg';
  static const filterIcon = 'assets/images/filter_icon.svg';
  static const settingsIcon = 'assets/images/settings_icon.svg';
  static const homeIcon = 'assets/images/home.svg';
}

Tried to clean and rebuild
Tried changing the asset folder name and change it also in the yaml

Tags:

2

Answers


  1. 0

    Following steps to check

    assets:

    - assets/images/
- assets/translations/

    Check This

    • assets/images/ & assets/translations/ must two tab away from left

    • Folder/Directory name same as assets, images and translations

    • Directory are must same hierarchy

      assets
    images
    translations

    • In flutter web some time asset image are not load in web(desktop) but it will work in mobile web (mobile chrome or mobile web)

    • In Flutter web asset image some time not load in release version but work well in debug version

    • So check Above cases if it is work then change your images

    • In your code you use Container -> decoration -> image: DecorationImage. Its not work some time in flutter web, so first check with Image.asset (not inside decoration).

    • flutter clean

    • flutter pub get

    Hope this will work

    Login or Signup to reply.
  2. 0

    You can’t simply render the SVGs like that. You can easily google the correct method.

    Apart from that, just restarting the IDE solved this issue for me. If this doesn’t work, you can try running flutter doctor to see if there’s any issue with the setup process. Also do flutter clean and flutter pub get.

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

Back To Top
Search