web-dev-qa-db-fra.com

Images d'actif Web à flotte N'affichant pas lorsqu'il est déployé sur Web Server

J'ai créé un flutter web Projet qui utilise des images réseau et des images d'actifs, tout fonctionne bien lors du débogage sur mon PC, mais lorsque je le déploie sur un serveur Web, les images de réseau fonctionnent bien, mais les images d'actifs ne montrent pas du tout. Lorsque j'inspecte la page dans la console de navigateurs Web, j'obtiens l'erreur ci-dessous:

$1 @ window.Dart:120
/assets/slack.png:1 Failed to load resource: the server responded with a status of 503 ()
window.Dart:120 Error while trying to load an asset: Failed to load asset at "assets/slack.png" (503)

$1 @ window.Dart:120
/assets/flutterLogo.png:1 Failed to load resource: the server responded with a status of 503 ()
window.Dart:120 Error while trying to load an asset: Failed to load asset at "assets/flutterLogo.png" (503)

$1 @ window.Dart:120
/assets/kross.jpg:1 Failed to load resource: the server responded with a status of 503 ()
window.Dart:120 Error while trying to load an asset: Failed to load asset at "assets/kross.jpg" (503)

$1 @ window.Dart:120
/assets/codingRocket2.png:1 Failed to load resource: the server responded
flutterdartflutter-web
7
Norbert

Vous devriez ajouter des photos au fichier PUBSPEC.YAML et télécharger votre dossier d'actifs sur Web Server. Il s'agit probablement de ne pas télécharger de dossier

1
furkeen

Vous devez peut-être vérifier si le fichier est disponible dans le cadre de votre déploiement. 404 est le code d'erreur habituel que vous avez reçu pour la ressource introuvable. 503 est quelque chose lié à la disponibilité du serveur ou aux erreurs de serveur. Je ferais ce qui suit.

Étape 1. Vérifiez le dossier build

Essayez de courir le flutter build web Commande dans votre projet et inspecter le dossier de construction. En supposant un pubspec.yaml avec des configurations d'actifs suivantes.

  assets:
    - js/plotly_hookup.js
    - js/plotly-latest.min.js
    - images/
    - screen_shot.png

Je m'attendrais à ce que les suivants à l'intérieur de mon build\web\assets dossier.

Screen shot of build folder layout

Si cela ne fonctionne pas comme indiqué, il est temps d'inspecter le pubspec.yaml Fichier et corrigez les chemins.

Étape 2: Vérifiez votre dossier hébergé

Assurez-vous que les fichiers indiqués ci-dessus sont disponibles sur votre serveur où ce dossier est hébergé. Vérifiez également si le serveur contient des configurations à effectuer spécifiquement pour des fichiers image ou des types de fichiers d'images.

2
Abhilash Chandran