uni-app cli创建的项目中 css的background-image无法显示本地图片

uni-app cli创建的项目中 css的background-image无法显示本地图片

测试过的手机：

红米 荣耀10x

操作步骤：

  • 使用 vue create -p dcloudio/uni-preset-vue my-project 创建基础项目 选择默认模板
  • 将项目生成后 在hbx中 通过手机预览
  • 更改 index/index.vue 中 logo 的背景图 无法显示

预期结果：

能够正确显示背景图

实际结果：

无法正确显示本地图片背景图

bug描述：

通过cli创建的页面 在css中通过 background-image 引入本地背景图片 使用文档中说的 "~@/static/logo.png" 在app端无法显示背景图片
使用相对路径 "../../static/logo.png"、"/static/logo.png" 也无法显示背景图片 但是如果将 样式写在 行内 style 中 通过 "/static/logo.png" 就可以显示背景图片


更多关于uni-app cli创建的项目中 css的background-image无法显示本地图片的实战教程也可以访问 https://www.itying.com/category-93-b0.html

7 回复

更新到最新版本试试，相关问题

更多关于uni-app cli创建的项目中 css的background-image无法显示本地图片的实战教程也可以访问 https://www.itying.com/category-93-b0.html


已经用的就是最新正式版本的^2.0.2-4000820240401001 这个版本的

回复 0***@sina.com: 用这个HBuilderX 4.12.2024041009-alpha试试

回复 DCloud_UNI_Anne: 问题解决了 可以进行显示了

回复 0***@sina.com: 回复 DCloud_UNI_Anne: 更新到最新的alpha版本就可以了

回复 DCloud_UNI_Anne: 这个问题的具体原因是什么

在 uni-app CLI 创建的项目中，如果你遇到 background-image 无法显示本地图片的问题，可能是由于路径引用不正确或 Webpack 配置问题导致的。以下是一些可能的解决方案：

1. 确保路径正确

在 uni-app 中，图片路径需要使用相对路径或绝对路径。确保你的路径是正确的。

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

2. 使用 @ 别名

uni-app 默认配置了 @ 别名，指向 src 目录。你可以使用 @ 来引用 src 目录下的图片。

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

3. 使用 require 动态引入

在 uni-app 中，有时直接使用路径可能无法正确解析，你可以使用 require 动态引入图片。

background-image: url('~@/assets/images/your-image.png');

或者在 vue 文件中使用 style 绑定：

<template>
  <div :style="{ backgroundImage: `url(${require('@/assets/images/your-image.png')})` }"></div>
</template>

4. 检查 Webpack 配置

如果你仍然遇到问题，可能需要检查 uni-app 的 Webpack 配置，确保图片文件被正确处理。你可以通过修改 vue.config.js 来调整 Webpack 配置。

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('images')
      .use('url-loader')
      .loader('url-loader')
      .tap(options => {
        // 修改默认的 limit 值
        options.limit = 8192; // 默认是 8KB
        return options;
      });
  }
};

5. 检查文件类型限制

确保你尝试加载的图片文件类型是被支持的。uni-app 默认支持 .png, .jpg, .jpeg, .gif, .svg 等常见的图片格式。

6. 使用 base64 编码

如果图片较小，你可以将图片转换为 base64 编码，直接嵌入到 CSS 中。

background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...');
回到顶部