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

（顺便说一句：同样的qutiosn和答案：https://forum.ionicframework.com/t/images-not-displayed-on-device/89145）

Answer 2

在src / app / assets /文件夹下添加图像

打电话如下

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

Answer 3

如果您从html模板引用图像，那么您使用<img src="assets/img/mypic.png">它为我工作离子v3

Answer 4

我也遇到过这个问题，并通过引用模板文件中的所有图像源来解决它，就好像它们是从“src”目录中的index.html文件呈现一样。

<img src="assets/path_to_img_file_in_assets_folder">

当使用“离子服务”而不是在构建设备之后这种情况起作用的原因是“离子服务”使用本地http服务器，因此文件最终被请求为“http://localhost:port_number/assets/path_to_file”（这是正确的）。但是，在为设备构建apk之后，不使用本地服务器，并且文件无法访问，因为模板是从index.html文件呈现的。

Answer 5

这发生在我身上，我用以下方式解决了它，确保在图像的细节中文件像.jpg或.JPG这看似简单，但做一个测试，你会看到问题将得到纠正。

Answer 6

我想在上面的答案中再补充一点 - 这对我来说已经是两次问题而且我必须两次都难以学习。

因此，如果您在资源路径中添加子文件夹（例如“Test”）并构建应用程序，则会在“www”文件夹中创建文件夹Test。

如果你稍后将src /中的文件夹重命名为“test”（注意小写t），“www”中的名称将保持为“Test”（注意大写t），图像将在浏览器中正常加载（如果你使用离子服务）。但是如果你在Android设备上运行它，那东西将无法工作（图像将不会显示）。因此，您还必须在www文件夹中手动重命名文件夹。

这个“问题”在Windows上仍然存在，对Linux / Mac OS不确定，但我觉得这个问题不会发生在那里，因为大写T不会被视为小写T.

Answer 7

将图像插入资产文件夹。

例如：资产/ IMG / admin.png。

在上面的道路上工作得很好。我的图像在img文件夹里面的Asset文件夹中可用我有图像所以进入上面的方法。不要使用..asset / img ..

Answer 8

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

因为组件的所有模板都将添加到index.html中，因此，图像资源路径相对于index.html，而不是相对于模板文件

Answer 9

你不需要使用../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 10

将你的图像添加到src/assets/imgs directory

在HTML中设置图像路径

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

在SCSS中设置图像路径就像

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

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

Answer 11

我的问题是在文件夹中的文件名称大写..现在检查出来

Answer 12

在Ionic（v3）它应该工作，它的作品适合我。

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

额外

如果您的图片网址是动态的，那么您可以使用属性绑定，有时当我们使用img src时，它在真实设备上不起作用 -

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

然后它在浏览器中工作，但在真实设备中有时它不起作用，所以这是我们使用属性绑定的另一种方式 -

    <img [src]="imageUrl">  

它是在真实设备上工作。

Answer 13

我面临同样的问题，但是从相对到绝对的路径解决了它现在正在运作。我想分享我的经验，我没有更改角度文件，这需要img位置lolx它很有趣，但我做了它所以也看你的HTML页面。

Answer 14

我觉得真正的解决方案是：让你的所有路径像src =“assets / img / image.jpg”一样，一旦你在你的应用程序src中的任何地方做到这一点，做构建：ionic cordova build ...这将确保图像出现在下一次运行。

Answer 15

图片没有显示为ionic cordova build android我在Ionic 3中找到了这个解决方案。

试试这个：

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

这对我有用。

Answer 16

在我的应用程序中，图像在浏览器和真实应用程序上显示正常，方法是将图像放在不是资产但在www / img中，并在html文件中访问它们：

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