Ionic 2图像未在设备上显示

Question

看起来最简单的事情,例如为图像使用正确的url路径可能会耗费大量的时间和精力而根本没有成功.

所以,在我的主页上,我尝试使用以下方法之一:

<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"/>

所有这些都显示在浏览器上,但不在设备上.

我已经阅读了很多线程,但这是不可靠的,但是没有真正的解决方案.我真的很想知道我在这里做错了什么？任何帮助和真正的解决方案将非常感谢.

Answer 1

我对相对路径有同样的问题

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

确实可以使用离子服务/并且还可以在模拟器中使用livereload(例如来自src/pages/home/home.html)但不在设备上.

不要使用图像的相对路径!

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

适用于Ionic(v3)以及角度打字稿应用程序.在设备上(ionic cordova run)ionic serve 和ng s(角度应用程序)

用过的dir树:

您可以在离子会议启动器中看到(官方)示例,请尝试:

ionic start ionicConf conference

(顺便说一句:同样的问题和答案:https://forum.ionicframework.com/t/images-not-displayed-on-device/89145 )

Answer 2

你不需要使用../assets/.只需指定路径即可assets/img/.

对于CSS中的图像(background-image, border-image, etc.),您需要使用../assets/.

构建应用程序后,文件结构将如下所示,

 assets/
    img/
       img1.jpg
       img2.jpg

 build/
    main.css
    polyfills.js
    main.js

 index.html

HTML将动态添加到index.html.所以img标签的src 将来自index.html文件的同一位置.所以,assets/img/*.jpg对于img标签的src就足够了.来到CSS文件,assets文件夹是一个回到其位置的文件夹.因此,对于在CSS等中使用图像background-image,border-image我们需要指定路径,如,../assets/img/*.jpg.

Answer 3

添加图片到 src/assets/imgs directory

在HTML中设置图像路径

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

在SCSS中设置图像路径就像

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

它将工作浏览器,模拟器和构建