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

Posted 2021-03-27

我无法弄清楚出了什么问题。当我尝试ionic serve everthings正确加载。但是，当我尝试在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>

无法弄清楚请帮忙。

答案

你好，

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

从.ts文件中寻址图像时，请使用../assets relative path，因为我们必须先退出构建目录。从.html文件中寻址图像时，请使用资源相对路径，因为在最终的apk文件中，所有HTML都合并到一个名为index.html的文件中，该文件放在assets目录旁边，不需要上一个达到资产前的水平。

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

在HTML中设置图像路径

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

在SCSS中设置图像路径就像

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

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

希望对你有所帮助:)

另一答案

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

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

另一答案

试试这个 。

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