Angular Ionic 2图像未在设备上显示

看起来最简单的事情，比如为一个图像使用正确的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"/>

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

---

我读了这么多的文章，但却没有真正的解决办法，这真是可耻。我真的很想知道我做错了什么？非常感谢任何帮助和真正的解决方案。

您不需要使用

。/assets/

。只需从

资产/img/

指定路径即可

对于CSS中的图像（背景图像、边框图像等），您需要使用

。/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文件，资产文件夹是一个回到其位置的文件夹。因此，对于在CSS中使用图像，如，

背景图像

，

边框图像

等，我们需要指定路径，如，

。/assets/img/*.jpg

，在我的应用程序中，通过将图像放在www/img中，而不是放在asset中，并通过以下方式访问html文件，图像在浏览器和real app上显示良好：

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

---

将图像添加到src/app/assets/folder下

像下面这样打电话

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

---

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

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

（顺便说一句：相同的问题和答案：）

---

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

---

我的问题是文件夹中文件名的大写字母。。 现在检查一下

---

我曾经面临同样的问题，但通过从相对到绝对的路径解决了，现在它正在工作。我也想和大家分享我的经验，我没有更改需要img位置lolx的angular文件，这很有趣，但我这样做了，所以也可以查看您的HTML页面。

我觉得真正的解决方案是：将所有路径设置为src=“assets/img/image.jpg”，一旦您在应用程序src中的任何地方都这样做，建造：爱奥尼亚科尔多瓦建造。。。这将确保图像在下次运行时显示。

将图像添加到

src/assets/imgs目录中

像HTML一样设置图像路径

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

---

它将在浏览器、模拟器和构建中工作

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

<img src="assets/path_to_img_file_in_assets_folder">

当使用“ionic serve”而不是在为设备构建之后，这一功能起作用的原因是“ionic serve”使用本地http服务器，因此文件最终被请求为”（这是正确的）。但是，在为设备构建apk后，没有使用本地服务器，并且由于模板是从index.html文件呈现的，因此无法访问文件。

在Ionic（v3）中，它应该可以工作，对我来说也可以

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

附加的

如果您的图像URL是动态的，那么您可以使用属性绑定，有时当我们使用类似img src的方法时，它在实际设备上不起作用-

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

然后它在浏览器中工作，但在实际设备中有时不工作，因此这里是另一种使用属性绑定的方法-

    <img [src]="imageUrl">  

---

这是在真正的设备上工作。

图像未显示为

爱奥尼亚cordova build android

我在爱奥尼亚3中找到了此解决方案

试试这个：

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

---

这对我来说很有用。

这件事发生在我身上，我用以下方法解决了它，确保在图像的细节中，文件像.jpg或.jpg，这看起来很简单，但是做一个测试，你会发现问题会被纠正。

我想在上面的答案中再补充一点——这对我来说已经是一个问题了两次，两次我都不得不用艰苦的方式学习

所以，如果您将子文件夹（例如，“Test”）添加到资产路径中并构建应用程序，那么将在“www”文件夹中创建文件夹Test

如果稍后将src/中的文件夹重命名为“test”（注意小写字母t），“www”中的名称将保留为“test”（注意大写字母t），并且图像将正常加载到浏览器中（如果使用ionic serve）。但是如果你在安卓设备上运行它，它将无法工作（图像将无法显示）。所以，您必须手动重命名www文件夹中的文件夹

---

这个“问题”在Windows上仍然存在，不确定Linux/Mac操作系统是否存在，但我感觉这个问题不会在Windows上发生，因为大写字母t不会被同等对待为小写字母t。

将图像插入资产文件夹

ex:assets/img/admin.png.

---

在上面的路径中工作得很好。我的图像可在资产文件夹内img文件夹内我有图像，所以在上述方法中获得不要使用..asset/img.

尝试后，图像不会显示在浏览器中。同样，把它们放在www文件夹中，它们不会被擦除吗？奇怪。我再次检查，并根据第一个答案，这里应该工作（即使事情似乎已经改变了离子2 RC0位）。并且在构建时不会擦除映像，因为它们不在构建目录中。您是在CSS中引用图像还是直接在html中引用图像？在浏览器的调试器控制台中，是否有任何错误消息？我已尝试了这两个选项，先在CSS中引用，但没有成功，然后在html中引用，仍然没有什么不同。您是否将资产文件夹放在app文件夹中？正如

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

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

    <img [src]="imageUrl">  

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