微信小程序样式中的background-image使用本地图片不显示

最新推荐文章于 2024-03-10 22:24:08 发布
最新推荐文章于 2024-03-10 22:24:08 发布
阅读量2.7w 收藏 7
点赞数 2
分类专栏： 微信小程序 文章标签： 微信小程序background-image
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32678401/article/details/81743866
版权

无论是微信小程序原生开发，还是使用第三方开发微信小程序框架mpvue

都会发现样式中的background-image使用本地图片后，src里的已经是base64格式的

background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABICAYAAAC+2ghEAAAAAXNSR0IArs4c6QA……

但是，background-image里的url可以是服务器上的图片地址

如果使用本地图片的话，小程序里就用image组件吧，mpvue中使用img标签吧。

yumihe
关注
  • 2
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
微信小程序图片裁剪 we-cropper使用
07-21
微信小程序 图片裁剪 upload 为裁剪page页面 we-cropper 为 官方库 使用： wx.chooseImage({ count: 1, sizeType: ['compressed'], sourceType: ['album', 'camera'], success: function(res) { const src = res.tempFilePaths[0]; wx.navigateTo({ url: '../upload/upload?src=' + src }) }, }) 代码参考：原文链接：https://blog.csdn.net/qq_41049816/article/details/90604607
微信小程序阿里云OSS-sdk
08-16
阿里云OSS-sdk，大小536KB 微信小程序纯前端从阿里云OSS下载，可直接引用 文章地址：https://blog.csdn.net/qq_44695727/article/details/132154404
uniapp微信小程序无法使用本地静态资源图片，背景图在真机不显示方法
m0_62829704的博客
03-10 157
uniapp微信小程序无法使用本地静态资源图片，背景图在真机不显示方法_微信小程序_我总是词不达意-华为云开发者联盟
视图的背景图像「View background image」-crx插件
03-09
在“新标签”菜单项中添加“打开背景图像”。查找最近的元素到有背景图像的单击区域。 在网页上添加新菜单项-“在新标签页中打开背景图像”。 将尝试查找与具有背景图像的单击区域最接近的元素。 试图反映Chrome自身的“在新标签页中打开图像”功能，但目前Chrome扩展似乎无法根据函数的返回值显示上下文菜单项，因此无论如何，当前始终显示该菜单项背景图像的存在。 该扩展是开源的，并且是MIT许可的。 可以在https://github.com/rexxars/view-background-image上找到源代码-欢迎贡献。 支持语言:English
微信小程序--background-image直接设置本地图片路径，编辑器正常显示，真机运行不显示解决方法
wsdxho的博客
10-14 8346
项目场景： 微信小程序，设置background-image直接设置本地图片路径。 问题描述： 编辑器正常显示，真机运行不显示 原因分析： background-image只能用网络url或者base64图片编码。 解决方案： 1、将本地图片转为网络url后设置到background-image上 例如，云开发，后台上传本地图片 2、本地图片转成base64格式后设置到background-image上 3、弃用background-image赋值的方式，改用 image组件标
vue 背景图片 backgroundImage background-image vue的style方式绑定行内样式-background-image的方式等~
看到我在玩请叫我去敲代码的博客
04-27 6478
<template> <div id="app"> <div class="y_bj" :style="y_bj"></div> </div> </template> <script> import { Toast } from "vant"; export default { data() ...
小程序view的background-image不能用本地图片作为背景图？
热门推荐
qweasdzxc_1092665276的博客
04-24 2万+
链接：http://imgbase64.duoshitong.com
给uniapp中的某个view设置背景图片
青春不打烊的博客
03-13 8902
可以通过设置view的background或者background-image属性来实现： <template> <view class="content" :style="{background: 'url('+imageURL+')'}"> <!-- 如果是设置background-image则写成：<view class="conten...
微信小程序的background-image使用
web修理工
05-20 1万+
1.图片必须是网络图片,而且必须是https (base64据说也行没试过 )图片base64网址 2.在WXSS中使用以上文本： <view style="background-image:url({{item.url}})"></view> 3.为了是背景图片自适应宽高，可以做如下设置： { background-repeat:no-repeat; background-size:cover; } 注意: class ：静态的样式统一写到 class 中。 style 接
微信小程序在使用background-image设置背景图时报错：渲染层网络层错误
fangqi20170515的博客
10-18 1256
将image标签通过定位实现背景图的效果。
微信小程序 外卖点餐 KFC-master （源代码+截图）
06-21
微信小程序 外卖点餐 KFC-master （源代码+截图）微信小程序 外卖点餐 KFC-master （源代码+截图）微信小程序 外卖点餐 KFC-master （源代码+截图）微信小程序 外卖点餐 KFC-master （源代码+截图）微信小程序 外卖...
1-微信小程序项目实例源码-本地电商平台小程序.zip
06-19
微信小程序项目实例源码-本地电商平台小程序微信小程序项目实例源码-本地电商平台小程序微信小程序项目实例源码-本地电商平台小程序微信小程序项目实例源码-本地电商平台小程序微信小程序项目实例源码-本地电商平台...
uniapp微信小程序的background-image使用
前端程序员、项目经理、人工智能博主
12-03 4686
我们知道微信小程序的图片不能使用本地图片，而必须使用网络图片 <view class="top-wrapper" style="backgroundImage:url(http{{imgURL})}"> 在data绑定imgURL:require(‘static/image/order_detailbj.png’) 如上我使用的是通过view标签设置图片背景的 如果我们想通过image标签也可以 <image :src='http+imgURL'></image> 有
解决 uniapp 开发微信小程序 不能使用本地图片作为背景图 问题
yangqii的博客
11-17 2412
使用微信小程序自带转换方法wx.getFileSystemManager().readFileSync(img, 'base64')在vue文件中调用 urlToBase64 方法，这边默认图片都放在 static 文件夹下。在静态资源文件夹下创建sass文件，如 base64-img-store.scss。在uni.scss文件中引入 base64-img-store.scss。将转换后的base64编码放到对应url里，样式变量名称可自行定义。vue文件<style lang="scss">中使用。
小程序 css设置 background-image 未生效
weixin_44805839的博客
06-29 2326
小程序 设置背景图的几种方法
Java毕业设计-基于SSM框架的大学生社团管理系统带lw(源码+演示视频+说明).rar
05-09
Java毕业设计-基于SSM框架的大学生社团管理系统带lw(源码+演示视频+说明).rar 【项目技术】 开发语言：Java 框架：ssm+vue 架构：B/S 数据库：mysql 【演示视频-编号：438】 https://pan.quark.cn/s/b3a97032fae7 【实现功能】 实现了社长管理，社团信息管理，社团分类管理，社团加入信息管理，社团成员登记管理，活动信息管理等功能。
基于javaEE+Mysql实现的超市积分管理系统(源码+数据库sql+论文+视频齐全)
最新发布
05-09
【作品名称】：基于javaEE+Mysql实现的超市积分管理系统(源码+数据库sql+论文+视频齐全) 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【项目介绍】： 超市会员积分管理系统主要用于实现了企业管理数据统计等。本系统结构如下： （1）网络会员管理中心界面： 会员修改密码信息模块：实现会员密码功能； 会员登陆模块：实现会员登陆功能； 会员注册模块：实现会员注册功能； 留言板模块：实现留言板留言功能 （2）后台管理界面： 系统用户管理模块：实现管理员的增加、查看功能； 会员信息管理模块：实现会员信息的增加、修改、查看功能； 注册用户管理模块：实现注册用户的增加、修改、查看功能； 会员卡管理模块：实现会员卡信息的增加、查看功能； 商品销售管理模块：实现商品信息的增加、查看功能； 会员积分管理模块：实现合作公司信息的增加、查看功能； 信息统计模块：实现数据统计报表功能； 留言板模块：实现留言板信息的增加、修改、查看功能；
background-image本地图片
03-07
background-image是CSS属性之一，用于设置元素的背景图像。本地图片指的是在本地计算机上存储的图片文件。 要在CSS中使用本地图片作为背景图像，可以按照以下步骤进行操作： 1. 将图片文件保存在本地计算机上的适当位置，例如在项目文件夹中创建一个名为"images"的文件夹，并将图片文件放入其中。 2. 在CSS样式表中，使用background-image属性来设置背景图像。可以使用相对路径或绝对路径来引用本地图片。相对路径是相对于CSS文件的位置而言的。 例如，如果CSS文件和图片文件都在同一目录下，可以使用相对路径引用图片： ``` .example { background-image: url("images/example.jpg"); } ``` 如果图片文件在CSS文件的上一级目录中，可以使用相对路径的"../"来引用： ``` .example { background-image: url("../images/example.jpg"); } ``` 也可以使用绝对路径来引用本地图片，例如： ``` .example { background-image: url("C:/path/to/images/example.jpg"); } ``` 请注意，使用本地图片作为背景图像时，确保路径和文件名的大小写与实际文件一致，并且确保图片文件的格式正确（如.jpg、.png等）。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值