gygg

uni-app官网背景图片介绍:https://uniapp.dcloud.io/frame?id=%e8%83%8c%e6%99%af%e5%9b%be%e7%89%87

uni-app官网介绍,插入本地背景图片超过40kb时,会有性能问题,若必须使用,可将图片转换成base64格式后使用,或将图片放到服务器上,使用网络地址调用。

实际测试  background-image: url(\'~@/static/Newyear/3c/3c-di.png\');  插入背景图片超过40kb将不显示

本篇博客介绍另外一种方法,可插入本地背景图片超过40kb

dcloud社区相关问题:https://ask.dcloud.net.cn/question/62417

动态设置background-image路径

<view class="center" :style="{backgroundImage:`url(${imageSrc})`,backgroundSize: \'cover\'}">
</view>

Tips:backgroundImage为驼峰命名,使用background-image将报错

引入静态文件,imageSrc赋值

<script>
	import imageSrc from "@/static/Newyear/3c/3c-di.png"
	export default {
		data() {
			return {
				imageSrc: imageSrc
			}
		}
	}
</script>

Tips:本地图片命名不能使用中文,否则将编译报错

End!

分类:

技术点:

相关文章:

  • 2021-11-30
  • 2021-11-10
  • 2021-07-23
  • 2022-12-23
  • 2022-02-09
  • 2022-02-08
  • 2021-10-04
  • 2021-09-08
猜你喜欢
  • 2022-01-25
  • 2021-11-24
  • 2022-01-19
  • 2022-02-08
  • 2021-07-18
相关资源
相似解决方案