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

Question

Il semble que les choses les plus simples, comme l'utilisation du chemin d'accès correct pour une image, peuvent consommer tant de temps et d'efforts sans aucun succès.

Ainsi, 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 tant de fils de discussion et il est honteux qu'il n'y ait toujours pas de véritable solution à ce problème. J'aimerais vraiment savoir ce que je fais de mal ici ? Toute aide ou solution réelle serait très appréciée.

Answer 1

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

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

fonctionne avec ionic serve / et aussi avec livereload dans l'émulateur (par exemple depuis src/pages/home/home.html ) Mais pas sur l'appareil.

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

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

fonctionne pour moi avec Ionic (v3) et aussi les applications angular typescript. Sur l'appareil ( ionic cordova run ) avec ionic serve et aussi avec ng s (applications angulaires)

arbre utilisé :

vous pouvez voir un exemple (officiel) dans le starter de la conférence ionic, essayez :

ionic start ionicConf conference

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

Answer 2

Vous n'avez pas besoin d'utiliser ../assets/ . Il suffit de spécifier le chemin d'accès à partir de assets/img/ .

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

Une fois que vous avez 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

Le HTML sera ajouté dynamiquement à index.html . Donc src de img sera du même endroit que l'étiquette index.html fichier. Donc, assets/img/*.jpg est suffisante pour src de img tag. Venant à CSS le fichier actifs est un dossier qui renvoie à son emplacement. Ainsi, pour utiliser une image dans un CSS comme, background-image , border-image etc. nous devons spécifier le chemin comme, ../assets/img/*.jpg .

Answer 3

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 le SCSS comme

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

Il fonctionnera sur le navigateur, l'émulateur et le build

Answer 4

Mon problème était une majuscule dans le nom du fichier dans le dossier Je vérifie maintenant

Answer 5

Dans Ionic (v3), cela devrait fonctionner, cela fonctionne pour moi.

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

Supplémentaire

Si l'URL de votre image est dynamique, vous pouvez utiliser la liaison de propriété, parfois cela ne fonctionne pas sur l'appareil réel lorsque nous utilisons img src comme-

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

alors cela fonctionne dans le navigateur mais dans l'appareil réel parfois cela ne fonctionne pas, donc voici une autre façon d'utiliser la liaison de propriété-

    <img [src]="imageUrl">  

il fonctionne sur l'appareil réel.