Vue.js遍历(imagePath,href)列表渲染时图片无法显示该如何解决？

算力阿峰

2026-10-11

Vue.js 动态绑定本地图片不显示问题修复方案

问题根因

写在data中的本地图片相对路径不会被webpack自动识别为需要打包的静态资源，项目打包后实际运行路径和开发时的相对路径不匹配，因此图片无法正常加载。

修复后的代码

模板部分

<div
  v-for="image in socials"
  :key="image.id"
  >
    <a :href="image.href">
      <v-avatar
        size="48"
        tile
        >
        <img
          :src="getImgUrl(image.src)" 
        />
      </v-avatar>
    </a>
</div>

脚本部分

export default {
  name: 'App',
  data() {
    return {
      socials: [
        {
          id:"1",
          src:"socials/discord.png",
          href:"https://discord.gg/link_to_discord"
        },
        {
          id:"2",
          src:"socials/telegram.png",
          href:"https://t.me//link_to_telegram"
        },
        {
          id:"3",
          src:"socials/medium.png",
          href:"https://medium.com/@link_to_medium"
        }
      ],
    };
  },
  methods:{
    getImgUrl(path) { 
      return require('@/assets/' + path);
    }
  }
};