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

在微信小程序里使用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"/>

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/739481.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

python 通过代理服务器 连接 huggingface下载模型,并运行 pipeline

想在Python 代码中运行时下载模型&#xff0c;启动代理服务器客户端后 1. 检查能否科学上网 $ curl -x socks5h://127.0.0.1:1080 https://www.example.com <!doctype html> <html> <head><title>Example Domain</title><meta charset"…

前端css 纯数字或者字母 溢出不换行

问题&#xff1a;一个div元素盒子 宽度固定 内容是中文到达盒子宽度放不下时会自动换行&#xff0c;但是如果输入的事纯数字或者字母 会发现内容区会溢出 异常现象&#xff1a;11111超出div盒子 解决方案&#xff1a;添加属性 word-break: break-all; 原理&#xff1a;浏览器…

13年老鸟整理,性能测试技术知识体系总结,从零开始打通...

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 从个人的实践经验…

多线程案例及常用模式

一.单例模式——经典的设计模式 什么是单例模式&#xff1a;就是规定一个类只能创建一个对象&#xff0c;也就是保证某个类在程序中只存在唯一一个实例&#xff0c;而不会创建出多个实例 根据对象创建的时机不同&#xff0c;可以分为饿汉模式和懒汉模式 1.饿汉模式 在类加载…

Cloudflare Tunnel:无惧DDOS_随时随地安全访问局域网Web应用

利用此方法&#xff0c;您可以在局域网&#xff08;尤其是NAS&#xff09;上搭建的Web应用支持公网访问&#xff0c;成本低而且操作简单&#xff01; 如果这是博客的话&#xff0c;它还可以有效防止DDOS攻击&#xff01; 准备工作&#xff1a; 需要一个域名&#xff08;推荐N…

【微服务学习笔记(二)】Docker、RabbitMQ、SpringAMQP、Elasticseach

【微服务学习笔记&#xff08;二&#xff09;】Docker、RabbitMQ、SpringAMQP、Elasticseach Docker镜像和容器安装基础命令Dockerfile自定义镜像 MQ&#xff08;服务异步通讯&#xff09;RabbitMQ安装使用消息模型 SpringAMQP消息发送消息接收Work Queue 工作队列发布订阅Fano…

Python中的运算符介绍

前言: 零基础学Python:Python从0到100最新最全教程。 想做这件事情很久了,这次我更新了自己所写过的所有博客,汇集成了Python从0到100,共一百节课,帮助大家一个月时间里从零基础到学习Python基础语法、Python爬虫、Web开发、 计算机视觉、机器学习、神经网络以及人工智能…

VR全景在智慧园区中的应用

VR全景如今以及广泛的应用于生产制造业、零售、展厅、房产等领域&#xff0c;如今720云VR全景更是在智慧园区的建设中&#xff0c;以其独特的优势&#xff0c;发挥着越来越重要的作用。VR全景作为打造智慧园区的重要角色和呈现方式已经受到了越来越多智慧园区企业的选择和应用。…

vue3 实现一个tab切换组件

一. 效果图 二. 代码 文件 WqTab.vue: <template><div ref"wqTabs" class"wq-tab"><template v-for"tab in tabs" :key"tab"><div class"tab-item" :class"{ ac: tabActive tab.key }" c…

网络地址转换协议NAT

网络地址转换协议NAT NAT的定义 NAT&#xff08;Network Address Translation&#xff0c;网络地址转换&#xff09;是1994年提出的。当在专用网内部的一些主机本来已经分配到了本地IP地址&#xff08;即仅在本专用网内使用的专用地址&#xff09;&#xff0c;但现在又想和因…

浏览器缓存 四种缓存分类 两种缓存类型

浏览器缓存 本文主要包含以下内容&#xff1a; 什么是浏览器缓存按照缓存位置分类 Service WorkerMemory CacheDisk CachePush Cache 按照缓存类型分类 强制缓存协商缓存 缓存读取规则浏览器行为 什么是浏览器缓存 在正式开始讲解浏览器缓存之前&#xff0c;我们先来回顾一…

Python 的练手项目有哪些值得推荐?

Python 是一种强大的编程语言&#xff0c;有许多值得推荐的练手项目。以下是一些例子&#xff1a; 数据分析&#xff1a;利用 Python 的数据分析库&#xff08;如 pandas 和 NumPy&#xff09;处理和分析数据。你可以尝试对数据进行清洗、可视化&#xff0c;或者构建简单的预测…

韶音运动耳机好用吗?南卡、墨觉、韶音骨传导耳机三款全面评测

音乐是我生活中不可或缺的调味品&#xff0c;它伴随着我度过了无数个清晨的慢跑以及夜晚的悠闲散步。但是传统入耳式耳机总是让我感到不适&#xff0c;虽然它有着不错的降噪能力&#xff0c;但是很容易忽视周围环境的安全&#xff0c;而且运动的时候老容易掉。然后我遇到了骨传…

个人博客网站前端页面的实现

博客网站前端页面的实现 博客登录页 相关代码 login.html <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><…

基于SpringBoot和PotsGIS的各省地震震发可视化分析

目录 前言 一、后台接口研发 1、控制层实现 2、Mapper访问层 3、空间查询分析 二、前端可视化展示 1、主体地图定义 2、行政区划列表定义 3、行政区划定位 三、数据分析 1、北京市 2、广东省 3、青海省 4、湖南省 总结 前言 在之前的博文中&#xff0c;我们…

如何在Linux使用Docker部署Firefox并实现无公网IP访问本地浏览器

文章目录 1. 部署Firefox2. 本地访问Firefox3. Linux安装Cpolar4. 配置Firefox公网地址5. 远程访问Firefox6. 固定Firefox公网地址7. 固定地址访问Firefox Firefox是一款免费开源的网页浏览器&#xff0c;由Mozilla基金会开发和维护。它是第一个成功挑战微软Internet Explorer浏…

【Golang】golang使用三方SDK操作容器指南

【Golang】golang使用三方SDK操作容器指南 大家好 我是寸铁&#x1f44a; 总结了一篇 golang使用三方SDK操作容器✨ 喜欢的小伙伴可以点点关注 &#x1f49d; 这应该是目前全网最全golang使用三方SDK操作容器的指南了✌️ CreateConfig 主要是创建容器的配置信息&#xff0c;常…

【VS Code插件开发】自定义指令实现 git 命令 (九)

&#x1f431; 个人主页&#xff1a;不叫猫先生&#xff0c;公众号&#xff1a;前端舵手 &#x1f64b;‍♂️ 作者简介&#xff1a;前端领域优质作者、阿里云专家博主&#xff0c;共同学习共同进步&#xff0c;一起加油呀&#xff01; ✨优质专栏&#xff1a;VS Code插件开发极…

什么是VR虚拟现实体验店|VR主题馆加盟|元宇宙文化旅游

VR虚拟现实体验店是一种提供虚拟现实技术体验的场所。在这样的店铺里&#xff0c;顾客可以通过专业的设备和技术&#xff0c;体验虚拟现实技术带来的沉浸式感觉。 通常&#xff0c;这些商店提供一系列VR体验&#xff0c;包括互动游戏、沉浸式模拟、虚拟旅游和其他VR内容。客户可…

【linux】02 :Linux基础命令

1.掌握linux系统的目录结构 linux只有一个顶级目录&#xff0c;称之为&#xff1a;根目录。 windows系统有多个顶级目录&#xff0c;即各个盘符。 2.linux路径的描述方式 /在Linux中的表示&#xff1a;出现在开头表示根目录&#xff0c;出现在后面表示层级关系。 3.什么是命…