uniapp image图片显示问题

1 图片不显示问题
问题分析
在uniapp 开发过程中采用image引入本地资源图片，图片不展示，
解决方案
1.起初是认为在uniapp开发wx小程序是不允许采用加载本地资源的问题，发现可以在css样式中引入通过background-image：url（）中可以显示出来问题，但是通过image去引入就发现图片显示不出来，报 “图片不能从本地加载”error
查询资料发现 采用base64方式把图片的转化成base64格式进行渲染，可以直接加载，采用然后实现发现仍然失败了，
继续找原因，说图片资源可以通过requrie引入到在<script> requrie img from "/static/img/xxx.test"</script> 再次使用，发现引入报错，不能这样使用
最终 发现是image这层盒子没有辅助height 和 width ，并没有去加载图片的默认宽高，导致图片没有显示，就一直处于不显示状态为什么会出现这样情况呢？
默认宽度和高度：
如果没有为 <image> 组件设置宽度和高度，并且图片本身没有指定宽高属性，那么图片可能会使用默认的宽度和高度。这可能会导致图片显示时过小，无法在页面中明显地被看到。
图片加载时间：
如果在 <image> 组件渲染时，图片尚未加载完成，浏览器无法确定图片的实际尺寸。在这种情况下，如果没有设置宽度和高度，可能会导致布局问题，使得图片无法正确显示。

在尝试给盒子包一层<view></view> 然后给外层盒子赋值宽高，<image>不给宽高 然后在进行加载渲染 发现图片又不显示
最终认为当在<image></image>引入图片是要默认赋值宽高可以正常显示

2 相对路径和绝对路径问题
在UniApp中开发微信小程序时，引入图片时，相对路径和绝对路径可能会有一些差异。这差异主要涉及到小程序和UniApp框架的文件结构、路径解析规则以及开发环境的不同。

2.1相对路径：
相对路径是相对于当前文件的路径来引用资源的。例如，如果你的页面文件和图片文件位于同一目录下，你可以使用相对路径引用图片。 在小程序中，相对路径的解析可能会受到文件结构的影响，确保相对路径的正确性。相对路径通常是相对于当前文件的位置来解析的。
*在UniApp中，相对路径的解析也会受到框架的影响，因为UniApp将代码编译成小程序代码时可能会进行一些路径的转换。

`<!-- 相对路径示例 --> <image src="../images/example.jpg"></image>`

2.2 绝对路径：
绝对路径是从根目录开始的完整路径，不受文件结构的影响。在小程序中，通常是以 / 开头的路径。 UniApp会根据开发环境（如开发者工具、真机调试）进行路径的调整。在开发者工具中，绝对路径通常相对于项目根目录；在真机调试时，可能会有一些微信小程序的路径规范。

`<!-- 绝对路径示例 --> <image src="/images/example.jpg"></image>`

确保图片路径的正确性很重要，可以通过以下方式来避免一些常见的问题：
在UniApp的项目结构中，将图片文件放在特定的目录（如/static/目录）下，以确保路径的一致性。 在小程序开发者工具中，可以使用开发者工具提供的路径解析功能来验证路径是否正确。
*避免在路径中使用中文或特殊字符，以免出现编码问题。

笔者认为还是采用绝对路径相比相对路径更好一点
虽然在响应式布局中很有用，但如果不包括宽度和高度信息，就会导致卡顿。如果在解析  元素时没有提供高度信息，则在图片加载之前，此 CSS 实际上将高度设置为 0。当页面在初始显示到屏幕后加载图片时，页面会重新布局和重绘，为新确定的高度创建空间，从而导致布局移动