Ionic 3：图像文件未加载到设备中答案

【问题标题】：Ionic 3 : Images file does not load in devicesIonic 3：图像文件未加载到设备中
【发布时间】：2019-08-14 19:24:14
【问题描述】：

我不知道出了什么问题。当我尝试ionic serve 时，一切都正确加载。但是，当我尝试在 android 设备上运行它时，没有任何图像加载，而是显示错误 Failed to load resource: net::ERR_FILE_NOT_FOUND 没有正确加载图像。

我的 scss 文件

.bg-image{
        background-image: url('../../assets/imgs/bgimage.png');
        background-repeat: no-repeat;
        background-size: 200%;
        background-attachment: fixed;
        position: absolute;

我的html文件

<div class="bg-image">
.
.
</div>

无法弄清楚请帮忙。

【问题讨论】：

标签： css ionic-framework sass ionic3

【解决方案1】：

尝试更改路径将图像保留在主 www/assets/img 文件夹中，然后设置

background-image: url('assets/img/bgimage.png');

【讨论】：

【解决方案2】：

你好，

    .bg-image{
      background-image: url('../assets/imgs/bgimage.png');
      background-repeat: no-repeat;
      background-size: 200%;
      background-attachment: fixed;
      position: absolute;
    }

在处理 .ts 文件中的图像时，请使用 ../assets relative 路径，因为我们必须先离开构建目录。什么时候从您的 .html 文件中处理图像，使用资产相对路径，因为在最终的 apk 文件中，所有 HTML 都合并到一个文件中称为 index.html ，它位于资产目录旁边，并且在到达资产之前无需上一级。

将您的图片添加到 src/assets/imgs 目录

在 HTML 中设置图片路径

<img src="assets/imgs/bgimage.png">

在SCSS中设置图片路径

background-image: url(../assets/imgs/bgimage.png);

它适用于浏览器、模拟器和构建

希望对你有帮助:)

【讨论】：

无法找出带有'../assets/imgs/bgimage.png' 的图像显示在某处以及带有'assets/imgs/bgimage.png' 的某处
这是因为 android studio 更新而发生的吗？因为昨天它即使在发布 apk 之后也能正常工作，并且因为我更新了 Android Studio，它开始导致错误:(

【解决方案3】：

试试这个。

.bg-image{
        background-image: url('/assets/imgs/bgimage.png');
        background-repeat: no-repeat;
        background-size: 200%;
        background-attachment: fixed;
        position: absolute;

【讨论】：

不，它没有用。直到昨天它工作得非常好。今天突然面临 ERR_FILE_NOT_FOUND 的所有 png 错误
使用 chrome inspect 检查 APK 中的文件路径。

【解决方案4】：

以下解决方案对我有用。

将您的图片添加到src/assets/imgs 目录中
在您的 scss 文件中设置以下内容

    background-image: url("build/assets/imgs/bgimage.png");

【讨论】：