uni-app image标签的src绑定变量无法使用绝对路径@/

发布于 1周前 作者 gougou168 来自 Uni-App

uni-app image标签的src绑定变量无法使用绝对路径@/

开发环境 版本号 项目创建方式
Windows 13.4.1 HBuilderX
HBuilderX 4.29

示例代码：

<template>  
<image :src="data.typeimg"></image>  
</template>  

<script setup>  
import { reactive } from 'vue'  
const data = reactive({  
typeimg: '@/static/1.jpg',//不行  
//typeimg: '../../static/1.jpg'//可以  
})  
</script>

操作步骤：

如上代码

预期结果：

显示图片

实际结果：

不显示图片

bug描述：

image标签的src绑定一个变量的话，用不了绝对路径@


Harmonyos Next教程
2 回复

在文档有中有提到，可以详细看一下，在变量中引入时，图片需要单独引入：js/uts 引入静态资源
示例：
<template>
<image :src="data.typeimg"></image>
</template>

<script setup> import { reactive } from 'vue' import img_rc from '@/static/logo.png' const data = reactive({ typeimg: img_rc,//不行 //typeimg: '../../static/1.jpg'//可以 }) </script>

在uni-app中，image 标签的 src 属性通常用于绑定图片的URL。当使用相对路径（如~/static/images/example.png）时，uni-app会正确解析这些路径。然而，@/ 符号在uni-app中并不是一个内置识别的路径别名，它通常在Vue CLI项目中用作src目录的别名。

在uni-app中，如果你想要使用类似于@/的绝对路径，你需要通过配置Webpack别名（仅在HBuilderX的Vue CLI插件或自定义Webpack配置中有效）或者在uni-app的约定路径下组织你的资源文件。但大多数情况下，uni-app推荐使用相对路径或者预定义的静态资源路径。

下面是如何在uni-app中正确使用图片路径的示例，以及如何通过条件渲染来动态设置图片路径：

1. 使用相对路径

<template>
  <view>
    <image :src="relativeImagePath"></image>
  </view>
</template>

<script>
export default {
  data() {
    return {
      relativeImagePath: '~/static/images/example.png' // 注意：这里的路径在HBuilderX中会被正确解析
    };
  }
};
</script>

2. 使用静态资源路径（推荐）

将图片放在static文件夹下，然后使用相对路径（从static开始）或者直接使用/static/开头的绝对URL路径（基于应用的根目录）。

<template>
  <view>
    <image src="/static/images/example.png"></image>
    <!-- 或者使用变量绑定 -->
    <image :src="staticImagePath"></image>
  </view>
</template>

<script>
export default {
  data() {
    return {
      staticImagePath: '/static/images/example.png'
    };
  }
};
</script>

3. 条件渲染动态图片路径

如果你有多个图片路径，需要根据条件动态选择，可以这样做：

<template>
  <view>
    <image :src="getImagePath()"></image>
  </view>
</template>

<script>
export default {
  methods: {
    getImagePath() {
      // 根据某些条件返回不同的图片路径
      const condition = true; // 假设的条件
      return condition ? '/static/images/image1.png' : '/static/images/image2.png';
    }
  }
};
</script>

在uni-app中，尽量避免使用非标准的路径别名（如@/），而是遵循uni-app的路径约定，以确保跨平台兼容性和构建工具的正确解析。

回到顶部