web-dev-qa-db-fra.com

Ionic 2 Les images ne s'affichent pas sur l'appareil

Il semble que la solution la plus simple, telle que l’utilisation du chemin d’URL correct pour une image, consomme tant de temps et d’efforts sans succès. 

Alors, dans ma page d'accueil, j'ai essayé d'utiliser l'un des éléments suivants: 

<img src="../assets/img/image.jpg"/>
<img src="/assets/img/image.jpg"/>
<img src="assets/img/image.jpg"/>
<img src="./assets/img/image.jpg"/>
<img src="../../assets/img/image.jpg"/>

Tous ces éléments s’affichent sur le navigateur mais pas sur l’appareil. 

J'ai lu tellement de sujets et il est honteux qu'il n'y ait pas encore de solution réelle à ce problème. J'aimerais vraiment savoir ce que je fais mal ici? Toutes les aides et les solutions réelles seraient très appréciées.

angularionic-frameworkionic2
35
bluewavestudio

J'ai eu le même problème avec les chemins relatifs

<img src="../assets/img/vis_reco.png">

fonctionne avec le service ionique/et également avec la charge de foie dans l’émulateur (par exemple, depuis src/pages/home/home.html) mais pas sur l’appareil. 

N'utilisez pas de chemins relatifs pour les images !!!

<img src="assets/img/vis_reco.png">

fonctionne pour moi avec Ionic (v3) et également des applications TypScript angulaires . Sur le périphérique (ionic cordova run) avec ionic serve et également avec ng s (applications angulaires) 

utilisé dir arbre:

 used dir tree

vous pouvez voir un exemple (officiel) dans le démarreur de conférence ionique, essayez:

ionic start ionicConf conference

(d'ailleurs: même réponse et répondre ici: https://forum.ionicframework.com/t/images-not-displayed-on-device/89145 ) 

51
mhoff

Vous n'avez pas besoin d'utiliser ../assets/. Spécifiez simplement le chemin depuis assets/img/.

Pour les images dans votre CSS (background-image, border-image, etc.), vous devez utiliser ../assets/.

Une fois que vous aurez construit l’application, la structure du fichier sera la suivante:

 assets/
    img/
       img1.jpg
       img2.jpg

 build/
    main.css
    polyfills.js
    main.js

 index.html

HTML sera ajouté dynamiquement à index.html. Donc, src de la variable img, sera du même emplacement que le fichier index.html. Donc, assets/img/*.jpg est suffisant pour le code src de la variable img. Dans le fichierCSS, le dossier assets est un dossier qui revient à son emplacement. Donc, pour utiliser une image dans CSS comme background-image, border-image, etc., nous devons spécifier le chemin comme ../assets/img/*.jpg.

47
Harish

Ajoutez vos images à src/assets/imgs directory

Définir le chemin de l'image en HTML comme

<img src="assets/imgs/example.jpg">

Définir le chemin de l'image dans SCSS comme

background-image: url(../assets/imgs/example.jpg);

Il fonctionnera navigateur, émulateur et construction

8
gauravbhai daxini

Mon problème était en majuscule dans le nom du fichier dans le dossier ..

 enter image description here

2
Tzvi Gregory Kaidanov

Dans Ionic (v3), ça devrait marcher, ça marche pour moi.

<img src="assets/img/image.jpg">

Additionnel

Si votre URL d'image est dynamique, vous pouvez utiliser la liaison de propriété. Parfois, cela ne fonctionne pas sur le périphérique réel lorsque nous utilisons img src comme-

    <img src="{{imageUrl}}">

alors cela fonctionne dans le navigateur, mais parfois dans le vrai périphérique, cela ne fonctionne pas, alors voici une autre façon d'utiliser la propriété binding-

    <img [src]="imageUrl">

c'est travailler sur le vrai appareil.

2
Md Alamin

La vraie solution que je ressens est la suivante: créez tous vos chemins comme src = "assets/img/image.jpg" et une fois que vous le ferez partout dans votre application src, construisez: ionic cordova build ... à la prochaine manche.

1
Abhay Shiro

Je faisais face au même problème mais résolu par le chemin de relatif à absolu et cela fonctionne maintenant. Je voudrais également partager mon expérience, à savoir que je n’ai pas modifié le fichier angulaire qui nécessite l’emplacement img lolx, c’était drôle, mais je l’ai fait, donc regardez aussi votre page HTML.

1
shahbazpirzada

Ajoutez votre image sous src/app/assets/folder

appeler comme ci-dessous 

    <img src="assets/img/bjork-live.jpg"/>
0
Kishore Kumar

Si vous référencez l'image à partir d'un modèle html, vous utilisez<img src="assets/img/mypic.png">it a fonctionné pour moi ionic v3

0
solex

Image non affichée pour ionic cordova build Android Cette solution a été trouvée dans Ionic 3 .

essaye ça:

<img src="/Android_asset/www/assets/imgs/avatar.png" alt="Loading...">

c'est un travail pour moi.

0
MD.Riyaz

Je voudrais ajouter une dernière chose aux réponses ci-dessus: c’était déjà un problème pour moi deux fois et j’ai dû l’apprendre durement les deux fois.

Ainsi, si vous ajoutez un sous-dossier, par exemple "Test" dans le chemin de votre actif et créez une application, le dossier Test sera créé dans le dossier "www".

Si vous renommez ensuite le dossier dans src/en "test" (remarquez la minuscule t), le nom dans "www" restera en tant que "Test" (notez la majuscule t) et les images se chargeront normalement dans un navigateur (si vous le souhaitez. utiliser ionique servir). Mais si vous l'exécutez sur l'appareil Android, le problème ne fonctionnera pas (les images ne s'afficheront pas). Donc, vous devez renommer manuellement les dossiers également dans le dossier www.

Ce "problème" persiste sous Windows, pas certain pour Linux/Mac OS, mais j’ai le sentiment que ce problème ne se produira pas là-bas, car les lettres majuscules ne seront pas traitées de la même manière que les lettres minuscules.

0
Orochi

Dans mon application, les images s'affichent correctement sur les navigateurs et les applications réelles en les plaçant non pas dans un actif, mais dans www/img et en y accédant dans les fichiers html avec:

<img src="img/filename.png" />
0
Kaixin

C'est ce qui m'est arrivé et je l'ai résolu de la manière suivante. Assurez-vous que, dans les détails de l'image, le fichier ressemble à un fichier .jpg ou .JPG, cela peut sembler simple. Faites un test et vous verrez que le problème sera corrigé. .

0
MKOT