首页 文章

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

提问于
浏览 次
1

我在 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 在所有条件下都会出现，这与我的期望相违背！有人知道原因吗？

Update ：我解压缩生成的 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 文件中获取背景图像，很明显我们应该采用这条路径： ../assets/images/background/bg1.jpg ，这就是为什么表中的第4条记录都是 YES 的原因 . 现在的问题是为什么每个人都建议不要使用相对路径并坚持使用绝对路径？绝对的道路不会这样工作！

angular typescript ionic-framework ionic2 ionic3

4 回答

  • 0

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

    回复于
  • 0

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

    background-image: url('./assets/images/background/bg1.jpg')!important;
    回复于
  • 1

    更新最新答案：

    图像文件包含以下位置：

    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('../../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;
}
    回复于
  • 0

    我用

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

    代替

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

    回复于

相关问题