当前位置: 首页 > article >正文

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

问题描述:
需要在本地测试和发布后图片都能正常显示,线上是把项目放在了/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.kler.cn/a/503877.html

相关文章:

  • IOS界面传值-OC
  • C++基础入门
  • 论文笔记(六十一)Implicit Behavioral Cloning
  • 【C++多线程编程:六种锁】
  • 腾讯云AI代码助手编程挑战赛-智能聊天助手
  • STM32之LWIP网络通讯设计-下(十五)
  • 【Block总结】Conv2Former的Block,结合卷积网络和Transformer的优点|即插即用
  • 视频超分(VSR)论文阅读记录/idea积累(一)
  • 【学术会议指南】方向包括遥感、测绘、图像处理、信息化教育、计算机技术、通信、大数据、人工智能、机械设计、仿真...可线上参与
  • Oracle重启后业务连接大量library cache lock
  • 【web靶场】之upload-labs专项训练(基于BUUCTF平台)
  • 工程师 - Eclipse安装和UML插件
  • 代码随想录刷题day07|(数组篇)58.区间和
  • LeetCode 热题 100_从前序与中序遍历序列构造二叉树(47_105_中等_C++)(二叉树;递归)
  • AI-ANNE:探索型神经网络——将深度学习模型转移到微控制器和嵌入式系统
  • 【网络云SRE运维开发】2025第2周-每日【2025/01/11】小测-【第11章NAT理论和实操考试】解析和参考
  • 中国地面气候资料日值数据集(V3.0)格式和下载说明
  • 【深度学习】核心概念-数据驱动(Data-Driven)
  • 详解C#的文件写入和读取:从基础到高级应用
  • 初识JAVA-面向对象的三大特征之多态
  • DS1302模块学习笔记
  • 【gin】http方法了解,以及RESTful API与版本控制
  • [IGP]ospf ip frr 快速重路由技术
  • 认识微服务
  • 文本在屏幕上自由游动
  • 求矩阵不靠边元素之和(PTA)C语言