0
328
VistasIonic 2 Las imágenes no se muestran en el dispositivo
Simplemente parece que las cosas más simples, como usar la ruta de URL correcta para una imagen, pueden consumir mucho tiempo y esfuerzo sin ningún éxito.
Entonces, en mi página de inicio traté de usar uno de los siguientes:
<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"/>Todos los cuales se muestran en el navegador y no en el dispositivo.
He leído tantos hilos y es vergonzoso que aún no haya una solución real para esto. Realmente me gustaría saber qué es lo que estoy haciendo mal aquí. Cualquier ayuda y solución real sería muy apreciada.
3 Respuestas
Responde la pregunta0
Tuve el mismo problema con las rutas relativas
<img src="../assets/img/vis_reco.png">funciona con ionic serve / y también con livereload en el emulador (por ejemplo, desde src/pages/home/home.html ) pero no en el dispositivo.
¡No use rutas relativas para las imágenes!
<img src="assets/img/vis_reco.png"> funciona para mí con Ionic (v3) y también aplicaciones angulares mecanografiadas. En el dispositivo ( ionic cordova run ) con ionic serve y también con ng s (aplicaciones angulares)
árbol de directorios usado:
puede ver un ejemplo (oficial) en el iniciador de conferencias iónicas, intente:
ionic start ionicConf conference(por cierto: la misma pregunta y respuesta aquí: https://forum.ionicframework.com/t/images-not-displayed-on-device/89145 )
0
No necesita usar ../assets/ . Simplemente especifique la ruta desde assets/img/ .
Para imágenes en su CSS (background-image, border-image, etc.) , necesita usar ../assets/ .
Una vez que construyas la aplicación, la estructura del archivo será como,
assets/ img/ img1.jpg img2.jpg build/ main.css polyfills.js main.js index.html HTML se agregará dinámicamente a index.html . Entonces, src de la etiqueta img , será de la misma ubicación del archivo index.html . Entonces, assets/img/*.jpg es suficiente para el src de la etiqueta img . Al llegar al archivo CSS , la carpeta de activos es una carpeta que vuelve a su ubicación. Entonces, para usar una imagen en CSS como, background-image , border-image , etc., necesitamos especificar la ruta como, ../assets/img/*.jpg .
0
Agregue sus imágenes al src/assets/imgs directory
Establecer la ruta de la imagen en HTML como
<img src="assets/imgs/example.jpg">Establecer la ruta de la imagen en SCSS como
background-image: url(../assets/imgs/example.jpg);Funcionará con el navegador, el emulador y la compilación.