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

Question

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

我的 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>

想不通请帮忙

Answer 1

试试这个。

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

Answer 2

Hello,

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

When addressing images from your .ts files, use ../assets relative path because we have to get out of the build directory first. When addressing the image from your .html files, use assets relative path, because in the final apk file all HTML are merged into one single file called index.html which is placed next to the assets directory and there is no need to go up one level before reaching assets.

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

在HTML中设置图片路径喜欢

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

像SCSS一样设置图片路径

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

它将在浏览器、模拟器和构建中运行

希望对你有帮助:)

Answer 3

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

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

Answer 4

以下解决方案对我有用。

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

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

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

Ionic 3 : Images file does not load in devices

css

sass

ionic-framework

ionic3