uni-app nvue中的特小图片无法加载

uni-app nvue中的特小图片无法加载

开发环境 版本号 项目创建方式
Mac Mac OS Big Sur 11.4 HBuilderX

示例代码：

<image src="../../../../static/common/img/test.png" @error="loadError"></image>  

loadError(e) {  
    console.log('loadError', e)  
}

操作步骤：

按示例代码引用图片

预期结果：

正常引用

实际结果：

无法引用，error的事件收到报错

bug描述：

在nvue文件，通过image标签引用小图片，无法加载，error事件中捕获到错误。确认图片是存在的，且路径正确，如果引用稍微大一点的图片，显示正常


更多关于uni-app nvue中的特小图片无法加载的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

无法复现问题，请提供一个简单的测试工程

更多关于uni-app nvue中的特小图片无法加载的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在nvue中，小图片加载失败通常与图片尺寸和渲染机制有关。nvue使用原生渲染，对极小图片（如1x1像素）可能存在兼容性问题。建议从以下方面排查：

  1. 检查图片尺寸：确保图片不是过小（如小于4x4像素），过小图片在某些Android/iOS版本上可能无法正常渲染。

  2. 使用base64内嵌：将小图片转为base64格式直接嵌入，避免路径加载问题：

    <image src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg=="></image>
回到顶部