离子：在设备上运行时未显示图像

Question

我在我的scss 文件中为一个 div 设置了背景图片：

#header {
  background-image: url('/assets/images/background/bg1.jpg')!important;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  height: 100px;
}

assets 目录在src 下，在pages 旁边。

当我使用ionic serve 和ionic cordova run android -lc 时显示图像。但是当使用ionic cordova run android 在设备上运行应用程序时，图像不会显示。我已经阅读了几乎所有关于这个问题的类似问题，他们都指出应该避免使用相对地址，并且路径应该以assets 开头。我测试了从assets 开始的路径，但它没有显示任何内容（即使使用ionic serve，因为它试图从http://localhost:8100/build/assets/images/background/bg1.jpg 加载图像）。但是以/assets 开头的路径可以工作并从http://localhost:8100/assets/images/background/bg1.jpg 加载图像。

我该如何解决这个问题？不使用-lc时如何让图片出现在设备上？

附：这是src下的目录结构：

├───app
├───assets
│   ├───fonts
│   │   └───custom
│   ├───i18n
│   ├───icon
│   └───images
│       ├───background
│       └───markers
├───components
│   └───progress-bar
├───models
├───pages
│   ├───friends
│   ├───home
│   ├───login
│   ├───map
│   ├───tabs
│   └───items
├───providers
│   ├───alert
│   ├───map
│   └───message
└───theme

我的scss 文件位于pages/items 目录下。额外的测试给了我以下结果，表明图像在哪些条件下显示：

+------------------+-------------+-----------------+-------------+
| Path starts with | ionic serve | run android -lc | run android |
+------------------+-------------+-----------------+-------------+
| assets           | No          | No              | No          |
| /assets          | Yes         | Yes             | No          |
| ./assets         | No          | No              | No          |
| ../assets        | Yes         | Yes             | Yes         |
| ../../assets     | Yes         | Yes             | No          |
+------------------+-------------+-----------------+-------------+

好吧，正如您所见，../assets/images/background/bg1.jpg 在所有条件下都会显示，这与我的预期相反！有人知道原因吗？

更新： 我提取了生成的apk 文件，这里显示了其中的目录树：

├───assets
│   ├───fonts
│   │   └───custom
│   ├───i18n
│   ├───icon
│   └───images
│       ├───background
│       └───markers
├───build
├───cordova-js-src
│   ├───android
│   └───plugin
│       └───android
└───plugins
    ├───cordova-plugin-camera
    │   └───www
    ├───cordova-plugin-device
    │   └───www
    ├───cordova-plugin-file
    │   └───www
    │       └───android
    ├───cordova-plugin-file-transfer
    │   └───www
    ├───cordova-plugin-geolocation
    │   └───www
    │       └───android
    ├───cordova-plugin-googlemaps
    │   └───www
    ├───cordova-plugin-splashscreen
    │   └───www
    ├───cordova-plugin-statusbar
    │   └───www
    └───ionic-plugin-keyboard
        └───www
            └───android

所有scss 文件已合并到一个名为main.css 的文件中，该文件与许多其他js 文件一起位于build 目录下。从树中可以看出，assets 位于build 目录旁边。因此，要从main.css 文件中获取背景图像，很明显我们应该采用这条路径：../assets/images/background/bg1.jpg，这就是为什么表中第 4 条记录都是YES。现在的问题是为什么每个人都建议不要使用相对路径并坚持使用绝对路径？绝对路径不会这样工作！

Answer 1

我用

background-image: url('../assets/images/background/image_name.png');

而不是

background-image: url('../../assets/images/background/1.png'); 它对我有用，希望它也对你有用。

Answer 2

更新的最新答案：

图像文件包含以下位置：

src => assets => images => background => bg1.jpg

scss 文件包含以下位置：

scr => pages => items => items.scss

例如在项目文件夹中

1. items.html
2. items.scss
3. items.ts

我的例子是：

items.html

<div id="header"></div>

items.scss

问题是：改变 url 路径 background-image: url('../../assets/images/background/bg1.jpg'); 而不是 background-image: url( '/assets/images/background/bg1.jpg')!important;

#header {
  background-image: url('../../assets/images/background/1.png');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  height: 100px;
}

Answer 3

您可以打开您的 apk 文件并确定图像的正确路径。您可以通过文件存档器打开 apk。 我建议也使用浏览器 Chrome 的“远程设备”。这将节省您的大量时间。祝你好运））

Answer 4

您需要设置如下所示的路径。 即使用./assets/

background-image: url('./assets/images/background/bg1.jpg')!important;