Vue项目中如何从assets文件夹渲染图片？

核心原因 #

Vue项目里，assets目录下的资源会被webpack处理（比如添加哈希后缀），直接用字符串路径的话，编译后实际路径和你写的不一致，导致404。而外部URL不会经过webpack处理，所以能正常显示。

具体解决方法 #

方法1：在数据中用require()引入图片 #

修改你的卡片对象，把图片路径用require()包裹：

data() {
  return {
    cards: [
      {
        imgSrc: require('@/assets/your-image.jpg'), // @代表src目录
        title: '卡片标题'
      }
    ]
  }
}

然后模板里直接绑定：

<template>
  <div class="card" v-for="card in cards" :key="card.title">
    <img :src="card.imgSrc" alt="卡片图片">
  </div>
</template>

方法2：在模板中动态拼接并使用require() #

如果图片路径是动态生成的（比如根据变量拼接），可以在模板里这样写：

<template>
  <div class="card">
    <img :src="require(`@/assets/${imageName}.jpg`)" alt="动态图片">
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageName: 'your-image'
    }
  }
}
</script>

方法3：把图片放到public目录（不推荐，除非是无需webpack处理的静态资源） #

如果把图片移到public目录下，就可以直接用根路径访问：

data() {
  return {
    imgSrc: '/your-image.jpg' // public目录下的直接写根路径
  }
}

注意：public目录下的资源不会被webpack处理，文件名不会加哈希，适合不需要编译的静态资源。

注意事项 #

• 确保路径中的文件名大小写正确，webpack在区分大小写的系统（比如Linux/macOS）下会严格匹配。
• @是Vue CLI中配置的src目录别名，如果你没配置，可以用相对路径，比如../assets/your-image.jpg（根据组件所在位置调整层级）。

内容的提问来源于stack exchange，提问作者Andrejr