[TOC] ### 方法一，先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> ```