vite项目中引入图片模块

• 在 <img src=""> 中可以直接引入assets中的静态图片，这里是没问题的。
• 但是在组件上传递一个图片路径的时候，如果还直接用静态的相对图片路径会出问题，当前的文件路径可能和组件的路径是不同的，所以相对图片路径会导致找不到图片。所以有了一种方法可以实现了，就是直接引入此图片的绝对路径来解决这个问题。
• 直接通过import * from '*.png'的方式导图图片，然后用 * 当做图片路径就可以了。
• 如果需要直接获取url而不导入图片 new URL(url, import.meta.url).href
• 这种方式进行引入，第一个参数url是图片的相对当前文件的路径，第二个参数是基于url的base路径,比如'../assets/*png',import.meta.url 是该文件的绝对路径的，比如 C:\Users\wcz10\Desktop\website-master\src\ ，这样跟前面的url就可以进行拼接，形成一个URL实例，然后通过href获取这个路径。
• 我们可以将这个封装成一个方法

function getAssets(url: string) {
  return new URL(url, import.meta.url).href;
}

• 使用

 <div class="navBar">
 <!-- NavBar导航栏组件 -->
        <NavBar
          :icon="getAssets('../../assets/img/荣誉证书.png')"
          title="荣誉证书"
          enTitle="Promotion and application"
          moreLink="/Honor"
          :border="false"
        />
  </div>