Ionic 2图像未在设备上显示-Java 学习之路

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

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

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

15 回答

0

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

回复于 2024-05-20T22:48:23+08:00
0

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

回复于 2024-05-20T22:48:23+08:00
45

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

回复于 2024-05-20T22:48:23+08:00
1
在Ionic（v3）它应该工作，它的作品适合我 .
```
<img src="assets/img/image.jpg">
```
Additional

如果您的图片网址是动态的，那么您可以使用属性绑定，有时当我们使用img src时它不适用于真实设备 -
```
<img src="{{imageUrl}}">
```
然后它在浏览器中工作，但在真实设备中有时它不起作用，所以这是我们使用属性绑定的另一种方式 -
```
<img [src]="imageUrl">
```
它是在真实设备上工作 .
回复于 2024-05-20T22:48:23+08:00
50
图片未显示 ionic cordova build android 我在 Ionic 3 找到了此解决方案 .

试试这个：
```
<img src="/android_asset/www/assets/imgs/avatar.png" alt="Loading...">
```
这对我有用 .
回复于 2024-05-20T22:48:23+08:00
-1
在我的应用程序中，图像在浏览器和真实应用程序上显示正常，方法是将图像放在不是资产但在www / img中，并在html文件中访问它们：
```
<img src="img/filename.png" />
```
回复于 2024-05-20T22:48:23+08:00
1
在src / app / assets /文件夹下添加图像

打电话如下
```
<img src="assets/img/bjork-live.jpg"/>
```
回复于 2024-05-20T22:48:23+08:00
1

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

回复于 2024-05-20T22:48:23+08:00
0

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

回复于 2024-05-20T22:48:23+08:00
1
我对相对路径有同样的问题
```
<img src="../assets/img/vis_reco.png">
```
确实可以使用离子服务/以及模拟器中的livereload（例如来自src / pages / home / home.html） But not on the device.

不要使用图像的相对路径！
```
<img src="assets/img/vis_reco.png">
```
适用于Ionic（v3）以及角度打字稿应用程序 . 在设备（ ionic cordova run ）上使用 ionic serve 以及 ng s （角度应用程序）

用过的dir树：

您可以在离子 Session 启动器中看到（官方）示例，请尝试：
```
ionic start ionicConf conference
```
（顺便说一下：同一个排队并在这里回答：https://forum.ionicframework.com/t/images-not-displayed-on-device/89145）
回复于 2024-05-20T22:48:23+08:00
0
您不需要使用 ../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 .
回复于 2024-05-20T22:48:23+08:00
1
将图片添加到 src/assets/imgs directory

在HTML中设置图像路径
```
<img src="assets/imgs/example.jpg">
```
在SCSS中设置图像路径就像
```
background-image: url(../assets/imgs/example.jpg);
```
它将工作浏览器，模拟器和构建
回复于 2024-05-20T22:48:23+08:00
-2

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

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

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

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

回复于 2024-05-20T22:48:23+08:00
0
一世也遇到了这个问题，并通过引用模板文件中的所有图像源来解决它，就好像它们是从“src”目录中的index.html文件呈现一样 .
```
<img src="assets/path_to_img_file_in_assets_folder">
```
使用"ionic serve"但在构建设备之后没有这种情况的原因是"ionic serve"使用本地http服务器，因此文件最终被请求为 "http://localhost:port_number/assets/path_to_file" （这是正确的） . 但是，在为设备构建apk之后，不使用本地服务器，并且文件无法访问，因为模板是从index.html文件呈现的 .
回复于 2024-05-20T22:48:23+08:00
7
```
<img src="./assets/img/image.jpg"/>
```
因为组件的所有模板都将添加到index.html中，因此，图像资源路径相对于index.html，而不是相对于模板文件
回复于 2024-05-20T22:48:23+08:00

Ionic 2图像未在设备上显示

15 回答

相关问题