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对图片进行动态绑定文章来源:https://www.toymoban.com/news/detail-535688.html
可以通过一下方法进行绑定(注意vite根目录是/
,且vite会自动解析src中的字符串)文章来源地址https://www.toymoban.com/news/detail-535688.html
<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>
到了这里,关于vue3 动态(:src)绑定img图片的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!