【微信小程序】不支持使用本地图片设置背景图片解决方法

这篇具有很好参考价值的文章主要介绍了【微信小程序】不支持使用本地图片设置背景图片解决方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

在小程序样式文件中,如果设置背景图片的路径用的是本地的,就会报错并且显示不出来;如果在wxml文件中使用图片的本地路径作为背景图,则微信开发者工具中可以显示出来,但是运行到手机上显示不出来,解决方法如下:
【微信小程序】不支持使用本地图片设置背景图片解决方法

方法一:

使用网络图片

background: url('https://cdn.ctoku.com/1123123123123e3241.png') no-repeat center;

方法二:

在线搜索图片转Base64编码
http://www.jsons.cn/img2base64/

【微信小程序】不支持使用本地图片设置背景图片解决方法

  background: url('data:image/png;base64,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') no-repeat center;

方法三:

使用<image/>标签文章来源地址https://www.toymoban.com/news/detail-506385.html

 <image src="/public/image/photo_sure.png" ></image>

到了这里,关于【微信小程序】不支持使用本地图片设置背景图片解决方法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • 微信小程序:使用image标签做背景图片并铺满屏幕

     wxml页面 wxss页面 效果:    

    2024年02月03日
    浏览(92)
  • 微信小程序 背景图片如何占满整个屏幕

    1. 在页面的wxss文件中,设置背景图片的样式: 2. 在页面的json文件中,设置背景图片的样式:

    2024年02月14日
    浏览(97)
  • 微信小程序中背景图片如何占满整个屏幕,拉伸

    不变形 1. 在页面的wxss文件中,设置背景图片的样式: 2. 在页面的json文件中,设置背景图片的样式:

    2024年02月14日
    浏览(113)
  • 解决uni-app开发小程序时,CSS调用本地图片当背景时不能使用的问题

    uniapp官方给出的解释就是小程序不支持本地图片,只支持网络访问或者base64。 当背景图片小于40kb的时候还好,uniapp会自动转为base64格式;但是大于40kb时候就不行了,目前我了解的有三种方式解决: 1.可以通过动态样式“:style”来解决,在标签上如下编写: 接着在data里声明

    2024年02月12日
    浏览(45)
  • 微信小程序 background-image直接设置本地图片路径,编辑器正常显示,真机运行不显示解决方法

    微信小程序,设置background-image直接设置本地图片路径。 编辑器正常显示,真机运行不显示 background-image只能用网络url或者base64图片编码。 1、将本地图片转为网络url后设置到background-image上 例如,云开发,后台上传本地图片 2、本地图片转成base64格式后设置到background-image上

    2024年02月15日
    浏览(86)
  • 微信小程序:chooseimage从本地相册选择图片或使用相机拍照

    文档 https://uniapp.dcloud.net.cn/api/media/image.html#chooseimage https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.chooseImage.html 代码示例

    2024年02月04日
    浏览(107)
  • 小程序背景图片设置方法

    3、利用image标签做到设置背景图片 思路:我们只要利用css中的z-index改变层级既可做到变成背景图的样子 看代码 wxml: wxss: 这样我们也可以做到背景图的效果。 相关推荐:小程序开发教程 以上就是小程序背景图片设置方法的详细内容,更多请关注群英网络其它相关文章!

    2024年02月07日
    浏览(61)
  • 微信小程序使用本地图片在真机预览不显示的问题解决

    开发工具上本地图片可以显示,但是在真机上预览的时候不能显示 通常我们代码路径是代码是这样写的 最后发现路径这样写在真机预览上无法显示 解决办法 路径需要相对于根目录来写 路径直接使用网络图片地址写 这样就可以解决真机预览图片不显示问题了。 如果路径没有

    2024年02月11日
    浏览(121)
  • 微信小程序不支持svg图片

    如果想使用svg也要转换成base64或者网络图片 否则在开发者工具中是显示图片的 而在手机微信预览中就无法显示图片 让人疑惑 require()是nodejs的写法 用于导入模块、JSON 和本地文件 可以使用相对路径 该路径可以使用路径别名命名的目录或当前工作目录进行解析。 在vue中使用

    2024年02月09日
    浏览(38)
  • RN 设置背景图片(使用ImageBackground组件)

     在RN版本0.46版本的时候添加了ImageBackground控件。ImageBackground可以设置背景图片,使用方法和image一样,里面嵌套了其他的组件     参考链接: https://www.reactnative.cn/docs/imagebackground https://chat.xutongbao.top/ 

    2024年02月15日
    浏览(37)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包