vue项目静态资源404报错(vue3)

vite项目推荐查看vite官方解释 或者将逻辑改为以下代码示例

静态资源处理 {#static-asset-handling} | Vite中文网 (vitejs.cn)

function getImageUrl(name) {
  return new URL(`./dir/${name}.png`, import.meta.url).href
}

webpack项目解决方案

报错详情: GET http://localhost:8080/@/assets/navimg/hongbao.png 404 (Not Found)

---

解决方案:

<script setup>
import { reactive } from "vue";

let navList = reactive([
  {
    id: 0,
    //将图片的路径地址使用require()函数包裹
    img: require("@/assets/navimg/chaoshi.png"),
    title: "超市便利",
  }
]);
</script>

---

完整代码(js使用vue3语法糖)

<div v-for="item in navList" :key="item.id">
    <img :src="item.img" />
</div>

<script setup>
import { reactive } from "vue";

let navList = reactive([
  {
    id: 0,
    //将图片的路径地址使用require()函数包裹
    img: require("@/assets/navimg/chaoshi.png"),
    title: "超市便利",
  }
]);
</script>

对require is not defined 做出解释 

node在升级之后，对 require 的使用方法发生了改变。从node.js 14版及以上版本中，require作为COMMONJS的一个命令已不再直接支持使用，所以我们需要导入createRequire命令才可以。
所以在使用 require 的时候只需要加入以下代码就可以了：

import { createRequire } from 'module';
const require = createRequire(import.meta.url);