vue3 显示本地asserts图片

方法一，先import在使用

vue3中这样显示

import chatHealth from '@/assets/chat-health.png'
<img :src="chatHealth" alt="" />

当然要看项目中路径相关的配置也可能是这样显示：

import loveimg from '/@/assets/icons/love.png'
<el-image style="width: 16px; height: 16px" :src="loveimg" fit="fit" />

方法二，根据动态图片名称使用

编写方法：
注意这里得路径是相对找到assts得路径，这个根据项目的层级不一样，需要自己调整

const getAssetsFile = (url: string) => {
  return new URL(`../../../assets/icons/${url}`, import.meta.url).href;
};

使用：

<el-image style="width: 16px; height: 16px;margin-right: 6px;" :src="getAssetsFile('loveon.png')" fit="fit" />

当然也可以把这个方法封装出来，这样每个页面都可以使用了
?在src目录下创建一个util文件夹，文件夹里创建一个utils.ts文件,加入如下代码：

 // 获取assets静态资源
const getAssetsFile = (url: string) => {
  return new URL(`../assets/images/${url}`, import.meta.url).href;
};
export default {
  getAssetsFile,
};

在vue文件中导入:

<script setup lang="ts">
 import util from 'src/util/utils'
</script>

使用：

<template>
 <img class="bg-img" :src="util.getAssetsFile('love.png')" alt="">
</template>