Home > Blockchain >  Exception caught by image resource service(already added assets in pubspec.yaml file)
Exception caught by image resource service(already added assets in pubspec.yaml file)

Time:05-09

Having this error "Exception caught by image resource service". I already have added assets in pubspec.yaml file but still getting this error does anyone know why? all files and resulting error is written down. Images used in the project are "https://photos.app.goo.gl/n5s5yiQnhYmFzVs1A".

file #1 main.dart

import 'package:flutter/material.dart';
import 'package:flutter_application_1/pages/welcome_page.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({ Key? key }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Flutter Demo",
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const WelcomePage(),
    );
  }
}

file #2 welcome_page.dart

import 'package:flutter/material.dart';

class WelcomePage extends StatefulWidget {
  const WelcomePage({ Key? key }) : super(key: key);

  @override
  State<WelcomePage> createState() => _WelcomePageState();
}

class _WelcomePageState extends State<WelcomePage> {
  List images = [
    "welcome-one.png",
    "welcome-two.png",
    "welcome-three.png",
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PageView.builder(
        scrollDirection: Axis.vertical,
        itemCount: images.length,
        itemBuilder: (_,index){
          return Container(
            width: double.maxFinite,
            height: double.maxFinite,
            decoration: BoxDecoration(
              image: DecorationImage(
                image: AssetImage(
                  "img/" images[index]
                ))
            ),
          );
      }),
    );
  }
}

pubspec.yaml file

flutter:
  uses-material-design: true

  assets:
    - img\welcome-one.png
    - img\welcome-two.png
    - img\welcome-three.png

error message

════════ Exception caught by image resource service ════════════════════════════
The following assertion was thrown resolving an image codec:
Unable to load asset: img/welcome-one.png
When the exception was thrown, this was the stack
#0      PlatformAssetBundle.load
<asynchronous suspension>
#1      AssetBundleImageProvider._loadAsync
<asynchronous suspension>
Image provider: AssetImage(bundle: null, name: "img/welcome-one.png")
Image key: AssetBundleImageKey(bundle: PlatformAssetBundle#acc1c(), name: "img/welcome-one.png", scale: 1.0)

CodePudding user response:

Assuming you have a folder in the root of your project (same level as lib folder) called img, then the only issue I see is that you need to use forward slash, not back slash in your pubspec.yaml

// changing \ to /

 assets:
    - img/welcome-one.png 
    - img/welcome-two.png
    - img/welcome-three.png

You also don't need to specify each image you can shorten it to this

 assets:
    - img/ 

That will target everything in the img folder.

  • Related