flutter / flutter

Flutter makes it easy and fast to build beautiful apps for mobile and beyond
https://flutter.dev
BSD 3-Clause "New" or "Revised" License
162.18k stars 26.64k forks source link

Flutter Web: Incorrect Encoding of Asset URLs Containing Spaces and Special Characters" #147415

Open hogdamian opened 2 weeks ago

hogdamian commented 2 weeks ago

Steps to reproduce

Add an image asset that contains spaces or special characters in its filename. Example: Add an image named "Image with Space.jpeg" to your assets directory.

flutter:
  assets:
    - assets/images/Image with Space.jpeg

Use Image.asset() in your app to load the image.

Widget generateImage() {
  var imagePath = "assets/images/Image with Space.jpeg";
  return Image.asset(imagePath, fit: BoxFit.cover);
}

Expected results

The image "Image with Space.jpeg" should load successfully without any errors. The network request for the image should show the URL as assets/images/Image%20with%20Space.jpeg.

Actual results

The image fails to load, and the console logs an error indicating a 404 HTTP status.

The network request for the image shows the URL as assets/images/Image%2520with%2520Space.jpeg, indicating that the space characters have been doubly encoded.
Error Message: Error while trying to load an asset: Flutter Web engine failed to fetch "assets/images/Image%2520with%2520Space.jpeg". HTTP request succeeded, but the server responded with HTTP status 404.

Code sample

Code sample ```dart Widget generateImage() { var imagePath = "assets/images/Image with Space.jpeg"; return Image.asset(imagePath, fit: BoxFit.cover); }```

Screenshots or Video

No response

Logs

No response

Flutter Doctor output

Doctor output ```console Doctor summary (to see all details, run flutter doctor -v): [√] Flutter (Channel stable, 3.19.6, on Microsoft Windows [Version 10.0.22631.3447], locale de-DE) [√] Windows Version (Installed version of Windows is version 10 or higher) [X] Android toolchain - develop for Android devices X Unable to locate Android SDK. Install Android Studio from: https://developer.android.com/studio/index.html On first launch it will assist you in installing the Android SDK components. (or visit https://flutter.dev/docs/get-started/install/windows#android-setup for detailed instructions). If the Android SDK has been installed to a custom location, please use `flutter config --android-sdk` to update to that location. [√] Chrome - develop for the web [X] Visual Studio - develop Windows apps X Visual Studio not installed; this is necessary to develop Windows apps. Download at https://visualstudio.microsoft.com/downloads/. Please install the "Desktop development with C++" workload, including all of its default components [!] Android Studio (not installed) [√] VS Code, 64-bit edition (version 1.86.2) [√] Connected device (3 available) [√] Network resources ! Doctor found issues in 3 categories.```
darshankawar commented 2 weeks ago

Thanks for the report @hogdamian I tried below code sample with which the image was loaded properly without the said exception you reported.

@override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Image.asset('assets/images/medical form.jpg', fit: BoxFit.cover)
        )
      ),
    );
  }
Screenshot 2024-04-29 at 11 55 00 AM

I am on mac machine and ran this code using latest master.