Vue父组件通过prop传递图片URL给子组件后图片不显示如何解决

Vue组件传图片路径无法显示问题解决方案 #

问题根因 #

直接向imageSrc prop传入静态字符串./assets/logo.png时，Vue的构建工具（Webpack/Vite）不会识别这是需要处理的静态资源路径，打包后不会将其转换为正确的资源访问地址，子组件拿到的原始相对路径无法匹配到打包后的图片资源，因此加载失败。

可用解决方法 #

• 方案1：绑定路径时用require包裹（适用Vue CLI/Webpack构建项目）
  App.vue中修改传参方式，用v-bind绑定prop，同时用require包裹资源路径，告诉构建工具处理这个静态资源，子组件代码无需修改：

  <!-- App.vue -->
  <HelloWorld :imageSrc="require('./assets/logo.png')" />
  

• 方案2：先导入图片再绑定（适用Vite/ESM规范构建项目）
  Vite不支持在template中直接使用require，需要先在script中导入图片资源再绑定：

  <!-- App.vue -->
  <template>
    <HelloWorld :imageSrc="logoImg" />
  </template>
  <script>
  import HelloWorld from './components/HelloWorld.vue'
  import logoImg from './assets/logo.png'
  export default {
    components: { HelloWorld },
    data() {
      return {
        logoImg
      }
    }
  }
  </script>
  

• 方案3：使用public目录存放图片
  如果不需要对图片做构建压缩等处理，可以把图片放到项目根目录的public文件夹下，直接传绝对路径即可：

  <!-- App.vue 假设图片放在public/logo.png -->
  <HelloWorld imageSrc="/logo.png" />
  

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