uni-app 更新编译器版本后 h5调试时无法加载本地图片资源
uni-app 更新编译器版本后 h5调试时无法加载本地图片资源
示例代码：
<template>
<view>
<image :src="ces"></image>
</view>
</template>
<script>
export default {
onLoad() {
},
data() {
return {
ces:'/static/app/pagesA/babyNameCreate/bt_1.png'
};
},
methods: {
getImg(){
return '/static/app/pagesA/babyNameCreate/bt_1.png'
},
}
};
</script>操作步骤：
就上面的代码，可以确定这个位置的图片是存在的，但是就是无法显示。如果直接 <image src="@/static/app/pagesA/babyNameCreate/bt_1.png"></image> 是可以显示出来的。不加@无法显示。
如果使用变量ces或者方法getImg，无论加不加@都无法显示。
无论是用相对地址还是绝对地址都是一样的结果。
如果这是一张远程图片，无论什么方式都能正常显示，只有本地图片会异常。
预期结果：
图片需要能正常显示
实际结果：
图片无法正常显示
bug描述：
更新编译器版本后，h5调试时无法加载本地图片资源。不止是火狐浏览器，编译器自带浏览器也是这样！
| 开发环境 | 版本号 | 项目创建方式 |
|---|---|---|
| Windows | win10 | HBuilderX |
自3.9+版本，static目录下支持了app和web两个新的平台专用目录。在运行到非app平台时，app目录不会copy到编译后的文件中。
参考文档：https://uniapp.dcloud.net.cn/tutorial/platform.html#static
可以将app目录重命名为其他名称。或者手动copy目录到编译后的资源中。
在 uni-app 更新编译器版本后，H5 调试时无法加载本地图片资源的问题，可能是由于以下几个原因导致的。你可以按照以下步骤进行排查和解决：
1. 检查图片路径
确保你在代码中使用的图片路径是正确的。在 uni-app 中，本地图片资源通常放在 static 目录下，引用时路径应该是相对于 static 目录的。
例如，如果你有一张图片 static/images/logo.png，你应该这样引用：
<image src="/static/images/logo.png"></image>2. 检查 vue.config.js 配置
如果你在项目中自定义了 vue.config.js，确保配置中没有影响到静态资源的加载。特别是 publicPath 和 outputDir 等配置项。
module.exports = {
publicPath: './',
outputDir: 'dist',
// 其他配置
}3. 检查 manifest.json 配置
在 manifest.json 中，确保 h5 配置项中的 publicPath 设置正确。通常情况下，publicPath 应该设置为 ./，以确保资源路径正确。
{
"h5": {
"publicPath": "./"
}
}4. 检查编译后的文件路径
编译后，检查生成的 dist 目录，确保图片资源被正确复制到输出目录中。如果图片资源没有被正确复制，可能是构建配置有问题。
5. 清理缓存
有时候，浏览器缓存可能会导致资源加载问题。尝试清理浏览器缓存，或者使用无痕模式进行调试。
6. 检查网络请求
使用浏览器的开发者工具（F12），查看网络请求，确认图片资源的请求路径是否正确，以及是否返回了 404 错误。如果路径错误，可以根据错误信息调整代码中的路径。
7. 更新依赖
确保你的项目依赖是最新的，特别是 uni-app 相关的依赖。你可以尝试删除 node_modules 目录和 package-lock.json 文件，然后重新安装依赖：
rm -rf node_modules package-lock.json
npm install8. 检查 uni-app 版本
如果你使用的是较新的 uni-app 版本，可能会有一些 breaking changes。查看 uni-app 的官方文档或更新日志，确认是否有相关的变更。
9. 使用 require 或 import 引入图片
如果你仍然遇到问题，可以尝试使用 require 或 import 的方式引入图片，确保路径正确。
<image :src="require('@/static/images/logo.png')"></image>或者
import logo from '@/static/images/logo.png';
export default {
data() {
return {
logo: logo
}
}
}10. 检查跨域问题
如果你在本地调试时使用了代理服务器，确保代理配置正确，避免跨域问题导致资源加载失败。
11. 检查 webpack 配置
如果你自定义了 webpack 配置，确保没有影响到静态资源的加载。特别是 file-loader 或 url-loader 的配置。
12. 重新编译项目
有时候，重新编译项目可以解决一些奇怪的问题。尝试删除 dist 目录，然后重新编译项目：
npm run build:h5