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（角度应用）

使用了目录树：

您可以在离子会议启动器中看到（官方）示例，请尝试：

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标记的src，img就足够了。来到 CSS 文件， assets 文件夹是一个文件夹，返回其位置。因此，对于在background-image，border-image等CSS中使用图像，我们需要指定路径，../assets/img/*.jpg。

Answer 3

将图片添加到src/assets/imgs directory

在HTML中设置图像路径，如

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

在SCSS中设置图像路径，如

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

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

Answer 4

我的问题在文件夹中的文件名中是大写的.. 立即查看

Answer 5

In Ionic (v3) it should work, its works for me.

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

Additional

If your image URL is dynamic then you can use property binding, sometimes it does not work on the real device when we use img src like-

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

then it works in the browser but in the real device sometimes it does not work, so here is another way we use property binding-

    <img [src]="imageUrl">  

it is work on the real device.

Answer 6

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

Answer 7

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

Answer 8

未显示ionic cordova build android的图片，我在 Ionic 3 中找到了此解决方案。

尝试一下：

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

这对我有用。

Answer 9

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

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

Answer 10

在src / app / assets / folder

下添加图片

如下所示打电话

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

Answer 11

如果您正在引用html模板中的图像，那么您可以使用 <img src="assets/img/mypic.png"> 它适用于我离子v3

Answer 12

我也遇到过这个问题，并通过引用模板文件中的所有图像源来解决它，就好像它们是从“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 13

这发生在我身上，我以以下方式解决了此问题，请确保在图像的细节中文件看起来像.jpg或.JPG，这看起来似乎很简单，但是进行测试，您会发现问题所在将得到纠正。

Answer 14

我想在上面的答案中再加上一件事-这对我来说已经是一个问题了两次，我不得不两次都用辛苦的方式来学习。

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

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

这个“问题”在Windows上仍然存在，不确定Linux / Mac OS上是否存在，但是我感觉在那里不会发生此问题，因为大写T不会被等同地视为小写T。

Answer 15

将图像插入资产文件夹。

ex：assets / img / admin.png。

在上述路径中的

可以正常工作。我的图像位于img文件夹内的Asset文件夹中，我有图像，因此可以使用上述方法。 不要使用..asset / img。。

Answer 16

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

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