vue-cli项目中img如何使用require动态获取图片

<template>
  <img :src="imgurl" />
</template>
<script>
import logo from "../img/logo.png";
// 或
const logo = require("../img/logo.png");
export default {
  data() {
    return {
      imgurl: logo,
    };
  },
};
</script>

<img src="../img/logo.png" />

<img src="require('../img/logo.png')"/>

<img src="/img/logo.png" />

const logo = require('../assets/logo.png');
<img src="/img/logo.png" />
<img src="../assets/logo.png" />
<img :src="logo" />

<template>
  <ul>
    <li><img :src="item.imgurl" v-for="item in goodslist" /></li>
  </ul>
</template>
<script>
export default {
  data() {
    return {
      goodslist: [
        { name: "goods1", imgurl: "../img/goods1.png" },
        { name: "goods2", imgurl: "../img/goods2.png" },
        { name: "goods3", imgurl: "../img/goods3.png" },
      ],
    };
  },
};
</script>

this.goodslist = this.goodslist.map(item=>{
//虽然路径是正确的，但以下方式引入会报`Cannot find module '../assets/logo.png'`
// item.imgurl = require(item.imgurl); 
// 正确的方式为 
item.imgurl=require('../img'+item.imgurl.replace('../img','')) return item; })