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>