Failed to load local image resource the server responded with a status of 500

文章讲述了在微信小程序中使用van-image组件加载本地图片时遇到500错误的问题,通过将图片目录调整到pages同级目录解决了问题,强调了正确的目录结构对本地图片加载的重要性。
摘要由CSDN通过智能技术生成

在微信小程序里使用van-image时,加载本地图片加载不出来,报错信息如下

Failed to load local image resource /miniprogram_npm/@vant/weapp/image/require(/images/xztp.jpg)
the server responded with a status of 500 (HTTP/1.1 500 Internal Server Error)
(env: Windows,mp,1.06.2401020; lib: 3.1.5)

在这里插入图片描述
界面中,尝试用了以下几种方式引用图片(图片目录在pages目录下面放的),都是报下面的错
在这里插入图片描述

方式1:
<van-image width="100" height="100" lazy-load src="../image/xztp.jpg"/>
方式2:
<van-image width="100" height="100" lazy-load src="require(../image/xztp.jpg)"/>
方式3:
<van-image width="100" height="100" lazy-load :src="require(../image/xztp.jpg)"/>

各种查找解决办法,最终看到微信小程序开发社区说,images目录应该放到pages同级目录,于是试试看吧,还果然可以了,能正常加载图片了
在这里插入图片描述

<van-image width="100" height="100" lazy-load src="/images/xztp.jpg"/>

调整目录结构后,本地图片加载正常。

  • 9
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值