uni-app vue3 编译为H5 配置了base的情况下 图片组件不应自动加base路径 尤其是后端返回的路径
uni-app vue3 编译为H5 配置了base的情况下 图片组件不应自动加base路径 尤其是后端返回的路径
示例代码：
"h5" : {
"router" : {
"base" : "/h5Page/",
"mode" : "hash"
}
}操作步骤：
- 配置base 为/h5Page/
- image src 路径为 服务端返回的 /static/img/logo.png
- 请求时不应该自动加上 h5Page
- 实际请求地址为 $domain/h5Page/static/img/logo.png
- 预期应该是 $domain/static/img/logo.png
- 原生vite+vue3 是没有这个问题的。
- 另外就算要加也应该加判断除了有domain的， / 开头的也不应该加base路径
预期结果：
预期应该是请求 $domain/static/img/logo.png
实际结果：
- 实际请求地址为 $domain/h5Page/static/img/logo.png
- 另外在开发环境 这么写
<script type="text/javascript" src="/static/comJs/wxJsSdk.js"></script>居然也会加 base里面的路径 导致proxy 无论怎么写都不行
bug描述：
vue3 编译为H5 配置了base的情况下，图片组件不应该自动加 base路径，尤其是后端返回的路径
这难道不是设计上的错误吗 ？ 配置base 是代码都在base之后，并不是所有资源。而且你们在请求接口时都做了 / 开头的判断， 为啥资源不做 ? 另外 以前的webpack 包括现在 的vite 都不是像你说的配置base 就所有资源都在base下。
回复 1***@qq.com: 举例，配置base为/h5/，将整个编译出来的应用资源都部署到了服务器的/h5/目录，此时开发者写了：src=’/static/logo.png’ <image :src="src"/>，那么图片地址应该不应该补充/h5/？
在 uni-app 中使用 Vue 3 编译为 H5 时，如果你配置了 base 路径，但希望某些图片路径（尤其是后端返回的路径）不被自动加上 base 路径，可以通过以下几种方式来处理：
1. 使用绝对路径
如果后端返回的图片路径是绝对路径（即以 http:// 或 https:// 开头），uni-app 不会自动加上 base 路径。因此，确保后端返回的路径是绝对路径即可。
2. 使用 :src 动态绑定
如果你需要动态绑定图片路径，可以使用 :src 动态绑定，并在绑定前对路径进行处理，确保路径不会被自动加上 base。
<template>
<img :src="getImageUrl(imagePath)" />
</template>
<script>
export default {
data() {
return {
imagePath: '/path/to/image.jpg' // 假设这是后端返回的路径
};
},
methods: {
getImageUrl(path) {
// 如果路径已经是绝对路径，直接返回
if (path.startsWith('http://') || path.startsWith('https://')) {
return path;
}
// 否则，返回不带 base 的路径
return path;
}
}
};
</script>3. 使用 uni.getImageInfo 获取图片信息
如果你需要获取图片的详细信息（如宽高），可以使用 uni.getImageInfo API，并在获取到图片信息后手动设置图片路径。
<template>
<img :src="imageUrl" />
</template>
<script>
export default {
data() {
return {
imageUrl: ''
};
},
mounted() {
this.loadImage('/path/to/image.jpg'); // 假设这是后端返回的路径
},
methods: {
loadImage(path) {
uni.getImageInfo({
src: path,
success: (res) => {
this.imageUrl = res.path;
},
fail: (err) => {
console.error('Failed to load image:', err);
}
});
}
}
};
</script>4. 配置 vue.config.js 或 vite.config.js
如果你使用的是 Vite 构建工具，可以在 vite.config.js 中配置 base 路径，并确保某些路径不被自动加上 base。
export default {
base: '/your-base-path/',
// 其他配置
};5. 使用 uni-app 的 image 组件
uni-app 提供了 image 组件，你可以使用它来加载图片，并确保路径不会被自动加上 base。
<template>
<image :src="imagePath" />
</template>
<script>
export default {
data() {
return {
imagePath: '/path/to/image.jpg' // 假设这是后端返回的路径
};
}
};
</script>