Vue.js中如何动态绑定:src属性使用图片资源？

情况1：图片存放在public文件夹 #

public下的资源会被直接复制到打包后的根目录，直接使用根路径访问即可，无需额外处理：

• 确保图片确实在public根目录（比如public/nameOfImage.jpeg），或对应子文件夹（如public/images/nameOfImage.jpeg）
• 子组件简化代码，无需mounted钩子，直接在模板绑定路径：

<template>
  <!-- 若图片在public子文件夹，路径改为 `/images/${rep.imagem}` -->
  <img :src="`/${rep.imagem}`" :alt="rep.altImagem">
</template>
<script>
export default {
  props: ['rep']
}
</script>

• 检查：确认rep.imagem是完整文件名（如nameOfImage.jpeg，不带多余斜杠），文件名大小写和实际文件一致。

情况2：图片存放在src/assets文件夹 #

assets下的资源会被webpack编译重命名，必须用require()动态引入：

• 子组件使用计算属性处理路径（路径要和组件相对于assets的位置对应）：

<template>
  <img :src="foto" :alt="rep.altImagem">
</template>
<script>
export default {
  props: ['rep'],
  computed: {
    foto() {
      // 示例：组件在src/components/下，assets在src/assets/，所以用../assets/
      return require(`../assets/${this.rep.imagem}`)
    }
  }
}
</script>

• 注意：rep.imagem必须是具体文件名，webpack编译时需要确定所有可能的图片路径，确保目标图片都在指定的assets目录下。

通用排查点 #

• 核对图片后缀：比如是.jpeg还是.jpg，不要写错
• 查看浏览器Network面板，确认请求路径和文件实际存储路径是否匹配
• 检查文件名大小写（部分系统区分大小写）

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