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

最新推荐文章于 2025-03-13 14:06:13 发布

程序猫(*^ω^*)

最新推荐文章于 2025-03-13 14:06:13 发布

阅读量6.8k

点赞数 3

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/weixin_50480451/article/details/127881855

版权

本文介绍了在Vue2项目中使用Webpack如何通过require动态绑定图片，而在Vue3项目中，由于Vite的配置差异，不再支持require方式，而是推荐使用模板字符串结合文件路径来动态加载图片。示例代码展示了在Vite环境下如何利用函数动态生成图片路径。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>