微信小程序动态绑定背景图片遇到的问题

问题简述:

问题代码:利用字符串模板显示图片路径的变量img

报错信息:

解决方法:

1.使用字符串拼接

2.效果正常显示,但是会报一个错误

3.这是因为初次加载的时候变量img默认是undefind,所以解决的方法是利用计算属性,动态的计算img值

原文地址:https://www.cnblogs.com/ruilin/p/12543150.html

时间: 2024-08-01 22:42:38

微信小程序动态绑定背景图片遇到的问题的相关文章

微信小程序——引入背景图片【六】

前言 之前写了一些小程序的博文只是看文档边看边写,了解下他,这次可是真枪真刀的做了! 框架使用的是美团的mpvue,我也是一边学习,一边写的,如有错误之处,还望大家指出. 在这里我有个问题,为什么微信小程序不支持css里面直接导入本地图片作为背景图呢? 内联式 <view class="img" style="background-image: url(/static/images/draw.png)"></view> 外部引入 如果css是

微信小程序插入背景图片(将图片转为base64)

关于在微信小程序中插入背景图片,是不能将本地文件直接作为background-image的,要么使用网址链接,要么使用base64,这,考虑到小程序的大小问题,毕竟大小限制为2M的小程序是不可能有多余的空间留给background-image的(准确地来说是在样式文件中需要使用图片时不能直接用本地文件,在wxml中可以?). 使用网址链接简单,直接找到需要的图片,一般右键都会有复制图片链接之类的 说一下将本地图片转为base64的操作(当然,并是不所有的图片转base64都合适,这比较适用于那个

微信小程序点击图片放大预览

微信小程序点击图片放大预览使用到 wx.previewImage 接口,可以放大.上/下一张 上代码 wxml代码 <view class='content-img' wx:if="{{images}}" > <view wx:for="{{images}}"> <image src="{{item}}" data-src="{{item}}" bindtap="previewImage

小程序引入背景图片

小程序是无法通过WXSS获取本地资源,既是background-image: url("../../images/bg.png"); 是没有办法显示图片出来的. 解决办法: 一.用网络图片 二.使用base64格式图片 随便在网上找一个在线转换成base64的,把你的图片转换一下就可以直接引入了 三.使用<image/>标签 希望能帮到你,哈哈哈哈 原文地址:https://www.cnblogs.com/mei1234/p/9704181.html

微信小程序 加载图片时,先拉长,再恢复正常

今天在写小程序,发现小程序的图片image如过mode设置为widthFix的话, 加载图片会被先拉伸,后恢复正常 我的处理方法是,给他一个初始的height值,或者就直接 height:auto 原文地址:https://www.cnblogs.com/bing0709/p/10729449.html

微信小程序使用本地图片在真机不显示的问题

最近做的小程序,在真机测试发现有些本地图片在开发工具上可以显示,但是在真机上预览的时候不能显示 代码是这样写的 <view class='seat-size' wx:for="{{item}}" wx:key="index" wx:for-index="index" wx:for-item="citem"> <image src='../../../images/seaticon.png' class='se

微信小程序设置背景图

在wxss里设置背景为本地图片是不可以的,会报错:"本地资源图片无法通过 WXSS 获取,可以使用网络图片,或者 base64,或者使用<image/>标签". 所以在wxml里添加背景图用网络资源. 先设置page的样式: page{ width:100%; height:100%; overflow: hidden; } 再添加一个view <view class='whole'> </view> 设置这个view的样式 .whole{ widt

微信小程序的实现图片预览功能

index.wxml <image src="../../images/01.jpg"class="userinfo-avatar" bindtap="previewImg01" background-size="cover"mode="aspectFill"></image> index.js //图片预览功能 previewImg01: function (event) { va

微信小程序预览图片

选择图片时可设置图片是否是原图,图片来源.这用的也挺常见的,比如个人中心中设置头像,可以与wx.upLoadFile()API使用 主要方法: wx.chooseImage(object) wxml <!--监听按钮--> <button type="primary" bindtap="listenerButtonChooseImage">点击我选择相册</button> <!--通过数据绑定的方式动态获取js数据-->