vue3 动态(:src)绑定img图片

webpack 创建的vue2可以通过 require对图片进行动态绑定

<script>
export default{
  data(){
    return{
      list:[
        {
          id:1,
          img:require("./assets/logo.png")
        },
        {
          id:2,
          img:require("./assets/logo.png")
        },
        {
          id:3,
          img:require("./assets/logo.png")
        }
      ]
    }
  }
}

但vite创建的vue3则不可以通过require对图片进行动态绑定

可以通过一下方法进行绑定(注意vite根目录是/，且vite会自动解析src中的字符串)

<script setup>
import { reactive } from "@vue/reactivity"

const getImg = (name)=>{
  return `/src/assets/${name}.png`
}
const zyc = reactive({
  list:[
    {id:1,
    img:getImg("logo")},
    {id:2,
    img:getImg("logo")},
    {id:3,
    img:getImg("logo")}
  ]
})
</script>