uni-app HBuilderX 4.0.8之后版本打包h5问题：使用<image :src="require('xxx/xxx.png')"时，图片大于5K不显示，而<img原生组件显示正常
uni-app HBuilderX 4.0.8之后版本打包h5问题：使用<image :src="require(‘xxx/xxx.png’)"时，图片大于5K不显示，而<img原生组件显示正常
操作步骤：
<image :src="require('xxx/xxx.png')" />
预期结果：
大于5K的图片可以显示正常
实际结果：
大于5K，不被内联base64的图片显示不出来
bug描述：
hbuilderx 4.0.8 之后包括 4.15 最新版本。打包h5。<image :src="require('xxx/xxx.png')" 图片大于5K，图片不显示。<img 原生组件显示正常。已100%确认是bug，并且有多人提出相同bug。暂无官方回应。
hbuilderx 3.8 测试，正常，不存在此问题。
具体查看：
https://issues.dcloud.net.cn/pages/issues/detail?id=1984
更多关于uni-app HBuilderX 4.0.8之后版本打包h5问题：使用<image :src="require('xxx/xxx.png')"时，图片大于5K不显示，而<img原生组件显示正常的实战教程也可以访问 https://www.itying.com/category-93-b0.html
如果vue2项目配置了h5->router->base为./，导致部分图片不显示，临时解决方案，下载附件中的文件，覆盖
HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/uni-h5/dist/index.umd.min.js
更多关于uni-app HBuilderX 4.0.8之后版本打包h5问题：使用<image :src="require('xxx/xxx.png')"时，图片大于5K不显示，而<img原生组件显示正常的实战教程也可以访问 https://www.itying.com/category-93-b0.html
4.15的bug是真的多，每次启动一个页面都是新打开一个浏览器就不能在已打开的浏览器钟打开吗，还有我想单独运行某一个页面结果跑到浏览器上就是首页并不是我想打开的那个页面，还有现在每次打开他都在循环打开首页这是写了个死循环？
这是别人提的类似问题。https://issues.dcloud.net.cn/pages/issues/detail?id=1570
嗯。我整理个空工程复现此问题。到时候下载包发这里
主要是有很多hbuilder 3.x 新建的项目。可能会存在 h5 相关的配置。如果升级 4.x 了。会大面积出现图片不显示的问题。并且很难排查，考虑到uniapp 的影响力和使用者数量。这个影响范围估计会很广
这个我发现了。把项目的 h5 配置。移动到新建项目内，复现了问题。目前的配置是模板项目带的，移除担心出现问题。因为可能会修改路径。我理解的这块的配置不应该影响打包。应该是image 组件 哪个地方判断出现了bug。
当前IDE的版本号是4.23
在css里配置div的background-image: url("…/assets/result.png");能正确显示，但是img/image的src就不能正确显示
在 uni-app 的 HBuilderX 4.0.8 之后的版本中，使用 <image :src="require('xxx/xxx.png')"> 时，图片大于 5K 不显示的问题，可能是由于 uni-app 在处理 require 时对图片大小进行了限制或处理方式发生了变化。以下是一些可能的解决方案和原因分析：
1. 问题原因
- 图片处理机制：
uni-app的<image>组件在处理require时，可能会对图片进行优化或压缩，导致大于 5K 的图片无法正常显示。 - 路径解析问题：
require的路径解析可能在某些情况下出现问题，尤其是图片较大时。 - 版本兼容性问题：
HBuilderX 4.0.8之后的版本可能在图片处理机制上有所调整，导致与之前版本的兼容性不一致。
2. 解决方案
方案 1：使用绝对路径或网络路径
如果图片大于 5K，建议将图片放到 static 目录中，然后直接使用绝对路径或网络路径：
<image src="/static/xxx/xxx.png"></image>
或者：
<image src="https://example.com/xxx/xxx.png"></image>
方案 2：修改图片大小
如果图片必须使用 require，可以尝试将图片压缩到小于 5K，看是否能正常显示。
方案 3：使用 <img> 原生标签
既然 <img> 原生组件显示正常，可以暂时使用原生标签替代：
<img :src="require('xxx/xxx.png')" />
方案 4：检查和升级 uni-app 版本
确保 uni-app 和 HBuilderX 是最新版本，可能存在已知问题已被修复。
方案 5：自定义图片处理逻辑
如果以上方法无效，可以尝试通过自定义方法加载图片：
export default {
data() {
return {
imageSrc: ''
};
},
mounted() {
this.imageSrc = require('xxx/xxx.png');
}
};
然后在模板中使用：
<image :src="imageSrc"></image>