uniapp中image加载图片失败解决方案

在开发uniapp应用时,可能会遇到图片无法加载的情况。这可能是由于图片路径错误、资源未正确打包、网络图片地址失效等原因导致的。

方案一:

使用require方式引入图片

复制代码
<template>
    <image :src="list[0].url" mode="scaleToFill" class="grid_img"></image>
</template>

<script>
	export default {
		data() {
			return {
				list: [
					{
						url: require('./img/cat_01.png')
					}
				]
			}
		}
	}
</script>

方案二:

使用属性background-image加载图片

复制代码
background-image:url(../../static/picture.png);
相关推荐
七七小报2 小时前
uniapp-商城-40-shop 购物车 选好了 进行订单确认4 配送方式3 地址编辑
uni-app
xuanjiong5 小时前
微信小程序,基于uni-app的轮播图制作,调用文件中图片
微信小程序·小程序·uni-app
flying robot5 小时前
uniapp: 低功耗蓝牙(BLE)的使用
uni-app
程序猿John5 小时前
uniapp跳转和获取参数方式
前端·javascript·uni-app
七七小报21 小时前
uniapp-商城-38-shop 购物车 选好了 进行订单确认4 配送方式1
uni-app
七七小报1 天前
uniapp-商城-39-shop 购物车 选好了 进行订单确认4 配送方式2 地址页面
uni-app
G_GreenHand1 天前
uniapp 仿小红书轮播图效果
uni-app
性野喜悲1 天前
uniapp返回上一页接口数据更新了,页面未更新
uni-app
冰镇生鲜1 天前
小程序·安全·胶囊·容器组件
前端·vue.js·uni-app
盛夏绽放1 天前
uni-app云开发总结
uni-app·云开发