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在设备上运行应用时，图像不会显示。我已经阅读了几乎所有关于这个问题的类似问题，所有这些问题都指出应该避免相对地址，路径应该以{{1}}开头。我测试了我的路径以assets开头并且它没有显示任何内容（即使使用assets，因为它尝试从ionic serve加载图像）。但是，使用http://localhost:8100/build/assets/images/background/bg1.jpg启动路径可以正常运行，并从/assets加载图像。

我该如何解决这个问题？不使用http://localhost:8100/assets/images/background/bg1.jpg时如何使图像显示在设备上？

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

Answer 1

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

Answer 2

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

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

Answer 3

更新最新答案：

图像文件包含以下位置：

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

scss文件包含以下位置：

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

例如在items文件夹

中

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

我的例子是：

<强> items.html

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

<强> items.scss

问题是：更改网址路径 background-image：url（＆＃39; ../../ assets / images / background / bg1.jpg＆＃39;）; 而不是背景-image：url（＆＃39; /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 4

我用

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

而不是

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

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

4 个答案: