Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Inconsistent Asset Image path across Mobile and Web platforms #86833

Open
kchatr opened this issue Jul 22, 2021 · 4 comments · May be fixed by #148643
Open

Inconsistent Asset Image path across Mobile and Web platforms #86833

kchatr opened this issue Jul 22, 2021 · 4 comments · May be fixed by #148643
Labels
a: assets Packaging, accessing, or using assets found in release: 2.2 Found to occur in 2.2 found in release: 2.4 Found to occur in 2.4 framework flutter/packages/flutter repository. See also f: labels. has reproducible steps The issue has been confirmed reproducible and is ready to work on P3 Issues that are less important to the Flutter project platform-web Web applications specifically team-web Owned by Web platform team triaged-web Triaged by Web platform team

Comments

@kchatr
Copy link

kchatr commented Jul 22, 2021

Steps to Reproduce

  1. Save an image to images, a subfolder within assets
  2. Add assets/images to the pubspec.yaml and run flutter pub get
  3. Retrieve the image using AssetImage("images/selected_image")
  4. Run the Flutter app

Expected results:
The image retrieved from assets and displayed.

Actual results:
On Flutter Web, the above code functions as expected and the image is retrieved; in order to get the image to display on mobile, however, the code must be modified to AssetImage("assets/images/selected_image"). This does not impact the appearance of the image on Web, but it is inconsistent behaviour that can lead to some elusive bugs.

Logs 
Unable to load asset: images/selected_image
@maheshmnj maheshmnj added the in triage Presently being triaged by the triage team label Jul 22, 2021
@maheshmnj
Copy link
Member

maheshmnj commented Jul 22, 2021 •
edited

Hi @kchatr, Thanks for filing the issue I am able to reproduce it an image asset located at assets/images/foo.png can be accessed on the

Web (works both ways)

AssetImage('images/foo.png"); /// This works only on web
AssetImage('assets/images/foo.png");

Mobile (Android/IOS)

AssetImage('assets/images/foo.png");

The issue is reproducible on both stable and master.

flutter doctor -v 
[✓] Flutter (Channel stable, 2.2.3, on macOS 11.4 20F71 darwin-arm, locale en-GB)
    • Flutter version 2.2.3 at /Users/mahesh/Documents/flutter
    • Framework revision f4abaa0735 (3 weeks ago), 2021-07-01 12:46:11 -0700
    • Engine revision 241c87ad80
    • Dart version 2.13.4

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at /Users/mahesh/Library/Android/sdk
    • Platform android-30, build-tools 30.0.3
    • ANDROID_HOME = /Users/mahesh/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.8+10-b944.6916264)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.4, Build version 12D4e
    • CocoaPods version 1.10.1

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 4.2)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.8+10-b944.6916264)

[✓] IntelliJ IDEA Community Edition (version 2021.1.2)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin version 57.0.5
    • Dart plugin version 211.7233

[✓] VS Code (version 1.58.0)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.24.0

[✓] Connected device (3 available)
    • iPhone 12 Pro Max (mobile) • 6A434744-B348-4FB3-AB10-131292174456 • ios            •
      com.apple.CoreSimulator.SimRuntime.iOS-14-4 (simulator)
    • macOS (desktop)            • macos                                • darwin-arm64   • macOS
      11.4 20F71 darwin-arm
    • Chrome (web)               • chrome                               • web-javascript • Google
      Chrome 91.0.4472.164

• No issues found!

[✓] Flutter (Channel master, 2.4.0-5.0.pre.87, on macOS 11.4 20F71 darwin-arm, locale en-GB)
    • Flutter version 2.4.0-5.0.pre.87 at /Users/mahesh/Documents/flutter_master
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision e084e9d946 (2 days ago), 2021-07-17 12:00:21 -0700
    • Engine revision 14a9e9a50e
    • Dart version 2.14.0 (build 2.14.0-321.0.dev)

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at /Users/mahesh/Library/Android/sdk
    • Platform android-30, build-tools 30.0.3
    • ANDROID_HOME = /Users/mahesh/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.8+10-b944.6916264)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.4, Build version 12D4e
    • CocoaPods version 1.10.1

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 4.2)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.8+10-b944.6916264)

[✓] IntelliJ IDEA Community Edition (version 2021.1.2)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin version 57.0.5
    • Dart plugin version 211.7233

[✓] VS Code (version 1.58.0)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.24.0

[✓] Connected device (3 available)
    • iPhone 12 Pro Max (mobile) • 6A434744-B348-4FB3-AB10-131292174456 • ios            • com.apple.CoreSimulator.SimRuntime.iOS-14-4
      (simulator)
    • macOS (desktop)            • macos                                • darwin-arm64   • macOS 11.4 20F71 darwin-arm
    • Chrome (web)               • chrome                               • web-javascript • Google Chrome 91.0.4472.114

• No issues found!

@maheshmnj maheshmnj added a: assets Packaging, accessing, or using assets found in release: 2.2 Found to occur in 2.2 found in release: 2.4 Found to occur in 2.4 framework flutter/packages/flutter repository. See also f: labels. has reproducible steps The issue has been confirmed reproducible and is ready to work on and removed in triage Presently being triaged by the triage team labels Jul 22, 2021
@goderbauer goderbauer added the platform-web Web applications specifically label Jul 28, 2021
@goderbauer
Copy link
Member

@yjbanov Any reason that the web needs to allow both ways?

@ferhatb ferhatb added the assigned for triage issue is assigned to a domain expert for further triage label Jul 29, 2021
@maheshmnj maheshmnj mentioned this issue Dec 2, 2021
Closed
@maheshmnj maheshmnj mentioned this issue Jan 28, 2022
Closed
@maheshmnj maheshmnj mentioned this issue Mar 3, 2022
Closed
@maheshmnj maheshmnj changed the title Inconsistent Asset Image Display + Use Across Mobile and Web Inconsistent Asset Image path across Mobile and Web platforms Mar 3, 2022
@yjbanov
Copy link
Contributor

yjbanov commented Apr 19, 2022

The current behavior seems to date back to the very beginnings of web support in Flutter and we never seriously re-evaluated it.

On a sample app with the following asset structure:

images/foo.png
assets/images2/bar.png

The following in pubspec.yaml:

flutter:
  uses-material-design: true

  assets:
    - images/foo.png
    - assets/images2/bar.png

And the following code:

...
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Image.asset('images/foo.png'),
            Image.asset('assets/images/foo.png'),
            Image.asset('images2/bar.png'),
            Image.asset('assets/images2/bar.png'),
          ],
        ),
...

I see the following behaviors between flutter run and python3 -m http.server 8000:

Path flutter run python3
images/foo.png Loads Loads
assets/images/foo.png Fails Fails
images2/bar.png Loads Fails
assets/images2/bar.png Loads Loads

Other than the case with the PathUrlStrategy we do not require any special server configuration to make Flutter work. A plain file server (or hosting services such as Firebase) should work out of the box. So consistency between the two is desirable.

I think what may be going on here is the fact that we have two "root" directories both being sources of assets:

  • The package root that may contain assets specified by pubspec.yaml.
  • The web/ sub-directory that also serves static web-specific files, such as index.html.

When the server receives a request, without looking into pubspec.yaml, it doesn't know if the request is for a web/ asset of a pubspec asset, so it tries both.

A solution might be to have flutter run always serve from build/web directory, just like a plain file server would. However, I'm not sure if the build/ directory is populated with assets during debug builds.

@jonahwilliams may have some context on this.

@yjbanov yjbanov added the P3 Issues that are less important to the Flutter project label Apr 19, 2022
@yjbanov yjbanov removed their assignment Apr 19, 2022
@Hixie Hixie removed the assigned for triage issue is assigned to a domain expert for further triage label Feb 8, 2023
@flutter-triage-bot flutter-triage-bot bot added multiteam-retriage-candidate team-web Owned by Web platform team triaged-web Triaged by Web platform team labels Jul 8, 2023
@DuncanConroy
Copy link

DuncanConroy commented Jul 31, 2023 •
edited

I encountered the same issue, and am solving this by simply adding a step to my GitHub Actions:

- name: Fix asset directory contents
  run: |
    mv build/web/assets/assets/* build/web/assets
    rmdir build/web/assets/assets

But this should not be necessary. Instead, the bundling should put the files into the right directory from the start.

@dam-ease dam-ease mentioned this issue Aug 17, 2023
Closed
2 tasks
@danagbemava-nc danagbemava-nc mentioned this issue Sep 4, 2023
Closed
2 tasks
@yjbanov yjbanov mentioned this issue Mar 14, 2024
Closed
@danagbemava-nc danagbemava-nc mentioned this issue May 14, 2024
Closed
@Gustl22 Gustl22 mentioned this issue May 19, 2024
Open
2 tasks
Gustl22 added a commit to Gustl22/flutter that referenced this issue May 19, 2024
@Gustl22
Attempt to resolve flutter#86833
aca6429
@Gustl22 Gustl22 linked a pull request May 19, 2024 that will close this issue
Draft
9 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
a: assets Packaging, accessing, or using assets found in release: 2.2 Found to occur in 2.2 found in release: 2.4 Found to occur in 2.4 framework flutter/packages/flutter repository. See also f: labels. has reproducible steps The issue has been confirmed reproducible and is ready to work on P3 Issues that are less important to the Flutter project platform-web Web applications specifically team-web Owned by Web platform team triaged-web Triaged by Web platform team
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Remove inconsistent asset path for web in debug mode Gustl22/flutter
7 participants
@yjbanov @Hixie @goderbauer @DuncanConroy @ferhatb @kchatr @maheshmnj