vite 打包图片时报错 Rollup failed to resolve import ...

今天在打包发布 vue3 前端项目时遇到了一个头疼图片无法引入的bug，特此来记录一下。

报错信息

[vite]: Rollup failed> to resolve import "src/assets/images/banner3.png" from "D:/MyProject/onesummer-blog-fronted/src/views/Home/components/HomeBanner.vue".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`
error during build:
Error: [vite]: Rollup failed to resolve import "src/assets/images/banner3.png" from "D:/MyProject/onesummer-blog-fronted/src/views/Home/components/HomeBanner.vue".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`

具体是我想用以下方式引入一张图片,vite 告诉我无法导入

    <el-carousel-item >
      <img src="src/assets/images/banner3.png">
    </el-carousel-item>

解决方法

将图片引用改成以下方式，问题解决

先用 js 导入图片

import banner1 from '@/assets/images/banner1.png'

再用标签导入

<el-carousel-item >
  <img :src="banner1">
</el-carousel-item>