uniapp 发布后原生img正常,image无法显示,img与uniapp image使用区别

news/2025/1/16 12:21:32/

问题描述:
需要在本地测试和发布后图片都能正常显示,线上是把项目放在了/web目录下,使用html img src=“static/images/guideArrow.png"时都能正常显示,但使用uniapp image则不行,由于image兼容性比较好,所以想改成Image格式。
测试效果:
uniapp image src=“static/images/guideArrow.png"在本地和服务器都是不能正常显示的,需要改成绝对路径src=”/static/images/guideArrow.png"在本地才能正常显示,但是在发布到服务器后会少个/web,导致服务器显示不了图片。
img能正常显示的原因是src解析与uniapp image src不同,src开头带不带/都是代表绝对路径(相对于服务器根目录),但在uniapp image中,不带则代表相对路径(相对于当前路由目录)。img有个特点, 当使用绝对路径,服务器部署到/web时,它会在/web下找图片,但是uniapp image则不会,image使用绝对路径是直接在服务器的”/"找图片。

解决办法:
写一个url转换方法,根据不同环境加不同前缀。

getImgUrl(url) {if (url) {return (process.env.NODE_ENV === 'production' ? '/web' : '') + url}
}

调用:

<image:src="getImgUrl('/static/images/guideArrow.png')"></image>

http://www.ppmy.cn/news/1563592.html

相关文章

5套经典行业原型-含生鲜电商、旅游社交、O2O美食、汽车美容行业

近期反复有小伙伴找我&#xff0c;希望推荐产品资料&#xff0c;于是我把看过且认可的部分资料整理了一下&#xff0c;以后会持续分享给大家~~ 01 5套经典行业原型-含生鲜电商、旅游社交、O2O美食、汽车美容行业 目录内容介绍 流年烘焙-O2O美食-需求文档v2.docx 车蜜-O2O洗车-…

【Unity】unity3D 调用LoadSceneAsync 场景切换后比较暗 部门材质丢失

解决方法&#xff1a;两个场景使用同样灯光 现象 直接进入第二个场景是可以正常显示 调用LoadSceneAsync来切换后&#xff0c;第二个场景出现比较暗的情况 解决方法&#xff1a;两个场景使用同样灯光&#xff0c;在loading 的场景中加入灯光。 Light—Directional Light 如果…

在服务器上增加新网段IP的路由配置

在服务器上增加新网段IP的路由配置 前提条件步骤一:检查当前路由表步骤二:添加新路由步骤三:验证新路由步骤四:持久化路由配置脚本示例结论在网络管理中,路由配置是一项基本且重要的任务。它决定了数据包在网络中的传输路径。本文将详细介绍如何在服务器上增加新的路由配置…

计算机视觉算法实战——视频分析(Video Analysis)

✨个人主页欢迎您的访问 ✨期待您的三连 ✨ ✨个人主页欢迎您的访问 ✨期待您的三连 ✨ ✨个人主页欢迎您的访问 ✨期待您的三连✨ ​​​​​​ ​​​​​​​​​​​​ ​​​​​ 视频分析是计算机视觉中的一个重要领域&#xff0c;旨在从视频数据中提取有用的信息&…

java项目启动时,执行某方法

1. J2EE项目 在Servlet类中重写init()方法&#xff0c;这个方法会在Servlet实例化时调用&#xff0c;即项目启动时调用。 import javax.servlet.ServletException; import javax.servlet.http.HttpServlet;public class MyServlet extends HttpServlet {Overridepublic void …

ThinkPHP 8的一对一关联

【图书介绍】《ThinkPHP 8高效构建Web应用》-CSDN博客 《2025新书 ThinkPHP 8高效构建Web应用 编程与应用开发丛书 夏磊 清华大学出版社教材书籍 9787302678236 ThinkPHP 8高效构建Web应用》【摘要 书评 试读】- 京东图书 使用VS Code开发ThinkPHP项目-CSDN博客 编程与应用开…

RPC 源码解析~Apache Dubbo

解析 RPC&#xff08;远程过程调用&#xff09;的源码可以帮助你深入理解其工作原理和实现细节。为了更好地进行源码解析&#xff0c;我们选择一个流行的 RPC 框架——Apache Dubbo 作为示例。Dubbo 是一个高性能、轻量级的开源 Java RPC 框架&#xff0c;广泛应用于企业级应用…

(即插即用模块-Attention部分) 四十四、(ICIP 2022) HWA 半小波注意力

文章目录 1、Half Wavelet Attention2、代码实现 paper&#xff1a;HALFWAVELET ATTENTION ON M-NET FOR LOW-LIGHT IMAGE ENHANCEMENT Code&#xff1a;https://github.com/FanChiMao/HWMNet 1、Half Wavelet Attention 传统的图像增强方法主要关注图像在空间域的特征信息&am…