利用 background-image: url('../img/bg.png') 设置本地图片为背景无效

  • 在小程序中为一个 view 设置一个背景图片,这很简单,在 html 中写过,信手拈来:
<view class='item' style="background-image: url('http://www.qqzhi.com/uploadpic/2014-10-14/160319405.jpg');">    
</view>
  • 简简单单就搞定了么,这有什么难的。什么?本地图片?说来就来:
<view class='membersCategory' style="background-image: url('../../imgs/cover.png');">
</view>
  • 模拟器中显示正常,在手机上看看,编译N多遍,怎么还不显示!!!
  • 对,小程序不支持本地图片作为 view 的背景,提供两种解决方案:①放服务器,加载网络图片;②将图片转成 base64 文件,然后使用(图片转 base64 传送门

  • 方式2的具体操作
  1. 在 constants 目录下创建一个 img2Base64.js 文件,然后将转成的字符串复制粘贴成变量,然后导出使用:
const homeBg0 = 'data:image/png;base64, ...';
const homeBg1 = 'data:image/png;base64, ...';
const homeBg2 = 'data:image/png;base64, ...';
const homeBg3 = 'data:image/png;base64, ...';
const homeBg4 = 'data:image/png;base64, ...';
const homeBg = [homeBg0, homeBg1, homeBg2, homeBg3, homeBg4];

module.exports={homeBg};
  1. 在使用的页面对应的 js 文件导入;
const Img2Base64 = require('../../constants/img2base64.js');

data: {
  homeBgArray: Img2Base64.homeBg, // 背景图片
},
  1. xml 中使用;
<block wx:for="{{array}} " wx:for-index="index " wx:key="{{item}} " wx:for-item="item ">
  <view class='membersCategory' style="background-image: url('{{homeBgArray[index%5]}}'); "></view>
</block>
  1. 搞定!!!
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容