uni-app项目中使用img标签时src相对路径打包app后被转成绝对路径问题

uni-app项目中使用img标签时src相对路径打包app后被转成绝对路径问题

产品分类

  • uniapp/App

PC开发环境

操作系统 版本号
Windows win10

手机系统

系统 版本号 厂商 机型
Android Android 10 华为 mate30

其他信息

  • 页面类型：vue
  • 打包方式：云端
  • 项目创建方式：HBuilderX

示例代码

<img src="../../static/login/shop-car.png" alt="" class="shop-car">

操作步骤

  • 将自定义基座运行到手机上。打开有img并且是相对路径的页面。会发现加载图片失败。

预期结果

  • 期望，img标签的src路径是相对路径时不会变成绝对路径。

实际结果

  • 真机调试发现，运行到app中，img的路径会被改成绝对路径，导致找不到图片资源。

更多关于uni-app项目中使用img标签时src相对路径打包app后被转成绝对路径问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

我的解决方法是： let url = require("/static/login/shop-car.png") // require 值是静态路径， 不能使用变量来代替

更多关于uni-app项目中使用img标签时src相对路径打包app后被转成绝对路径问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在uni-app中，使用相对路径引用静态资源时，打包到App平台确实会出现路径转换问题。这是因为App端资源访问机制与H5不同。

推荐使用@/static绝对路径写法：

<img src="@/static/login/shop-car.png" alt="" class="shop-car">

或者使用require动态引入：

<img :src="require('../../static/login/shop-car.png')" alt="" class="shop-car">
回到顶部