解决uni-app开发小程序时,CSS调用本地图片当背景时不能使用的问题

这篇具有很好参考价值的文章主要介绍了解决uni-app开发小程序时,CSS调用本地图片当背景时不能使用的问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

uniapp访问本地图片,uni-app,小程序,uni-app,微信小程序

uniapp官方给出的解释就是小程序不支持本地图片,只支持网络访问或者base64。

当背景图片小于40kb的时候还好,uniapp会自动转为base64格式;但是大于40kb时候就不行了,目前我了解的有三种方式解决:


1.可以通过动态样式“:style”来解决,在标签上如下编写:

<view :style="{backgroundImage:url(`${image}`)}"><view>

接着在data里声明image的路径:

import imgPic from '路径'
data(){
    return{
        image: imgPic
    }
}

 2.将图片转换为base64格式,但是得到的代码会很长很长...

 uniapp访问本地图片,uni-app,小程序,uni-app,微信小程序

base64转图片在线解码转换工具 (wenyiso.com)


3.将图片转换为url链接网络地址

uniapp访问本地图片,uni-app,小程序,uni-app,微信小程序

 路过图床 - 免费图片上传, 专业图片外链, 免费公共图床 (imgse.com)


总的来说,我觉得第三种方法最简单快捷!!!文章来源地址https://www.toymoban.com/news/detail-531550.html

到了这里,关于解决uni-app开发小程序时,CSS调用本地图片当背景时不能使用的问题的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uni-app 调用相机或相册图片并转为base64格式上传图片

    1、调用相机或相册上传图片 2、图片文件转base64 (1)下载插件 (2)页面引入插件 3、image-tools/index.js源码

    2024年02月11日
    浏览(62)
  • uni-app小程序加载图片优化

    场景: 较大的图片加载很慢,会出现较长时间的白屏,体验感差。   解决方案 :一进入页面,图片未加载成功前,进行loading…;图片加载完成后会触发@load事件;

    2024年02月11日
    浏览(56)
  • uni-app 微信小程序 保存当前页面为图片

    由于在微信小程序环境下面没法获取dom,很多方法都很难去实现保存html结构的页面,比较有效的#painter 可以不需要操作dom,但是那玩意儿和重新用js写个页面一样,简单的页面还好,复杂的,元素比较多的就很麻烦,所以考虑用webview+html2canvas来完成 先说一下思路,既然在微

    2024年02月11日
    浏览(55)
  • 微信小程序给图片加水印【使用uni-app】

    选择图片后使用canvas绘制图片,再绘制需要的水印文字,将绘制好的画布转化为图片即可 最终效果

    2024年02月10日
    浏览(64)
  • uni-app调用微信小程序流量主激励广告API

    如微信小程序要接入广告,则需要在该小程序注册的微信公众开发平台申请开通流量主广告API,否则无法接入广告API,实现页面广告展示功能。  开通条件 累计独立访客(UV)不低于 1000 存在刷粉行为或有严重违规记录的小程序不予申请 同一个收款账户最多允许关联 50 个账

    2024年01月20日
    浏览(47)
  • uni-app 经验分享,从入门到离职(实战篇)——模拟从后台获取图片路径数据后授权相册以及保存图片到本地(手机相册)

    这篇文章是本专栏 uni-app 的项目实战篇,主要内容的是模拟前端通过调用接口,然后获取到数据图片的路径数据,然后授权相册,最后把图片保存到本地(相册)。 本专栏主要是分享和介绍从零到一学习和使用的 uni-app 的笔记和个人经验。通过个人的学习经验和工作经验来给

    2024年02月08日
    浏览(62)
  • uni-app/微信小程序 实现图片或元素淡入淡出效果

    如题: 直接上代码 html js部分 需要在date中声明好                 current: 0,                 hidepic: null,                 showpic: null 因为是已进入就开始的,所以 要在生命周期中使用 最后一部别忘了,要给需要淡入淡出的元素或者图片设置绝对定位

    2024年02月12日
    浏览(71)
  • 微信小程序uni-app图片和base64相互转换

    以上代码仅供参考,具体实现细节和样式可以根据需求自行调整。 需要完整源码的朋友,希望你能点赞+收藏+评论,然后私信我即可~ 如果教程中有不懂的地方,可添加学习会员小助手咨询(微信:mifankeji77)

    2024年02月14日
    浏览(57)
  • uni-app微信小程序-利用canvas给图片添加水印

    选择图片 → 将图片绘制到 canvas 中并绘制水印 →将添加水印的图片绘制到 canvas 中 → 将 canvas 画布转换为图片地址 → 上传/展示操作 注意:微信小程序在选择照片或者唤起相机之前需要获取相应的 权限 利用 uni.getSetting 查看用户是否调用相机的权限(有就选择图片,没有就

    2024年02月06日
    浏览(59)
  • uni-app之微信小程序实现‘下载+保存至本地+预览’功能

    目录 一、H5如何实现下载功能 二、微信小程序实现下载资源功能方面与H5有很大的不同 三、 微信小程序实现文件(doc,pdf等格式,非图片)下载(下载-保存-预览)功能 四、图片预览、保存、转发、收藏:uni.previewImage() 五、 我当前遇到‘关于文件预览uni.openDocument()’API的问

    2024年02月15日
    浏览(66)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包