Vue3 dynamiquement (:src) lie l'image img

Vue2 créé par webpack peut lier dynamiquement des images via 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")
        }
      ]
    }
  }
}

Mais vue3 créé par vite ne peut pas lier dynamiquement les images via require

La liaison peut être effectuée via la méthode suivante (notez que le répertoire racine de vite est /, et vite analysera automatiquement la chaîne dans 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>

おすすめ

転載: blog.csdn.net/weixin_50480451/article/details/127881855