Vue.js中如何通过props将图片URL从父组件传递到子组件？

首先可确定props传递逻辑本身无异常，问题集中在url资源的处理或标签绑定逻辑上，可按以下步骤排查修复：

• 检查img标签的src绑定方式
  必须使用v-bind（简写:）绑定src属性，正确写法示例：

  <img :src="goods.url" :alt="goods.name">
  

  禁止直接写src="goods.url"，该写法会将变量名当做固定字符串解析，自然无法加载到对应图片。
• 排查本地静态资源路径问题
  如果url指向的是项目内的本地静态资源，按存放位置区别处理：
  • 资源存放在public目录下：直接传递根路径格式的url即可，例如/img/goods1.png
  • 资源存放在src/assets目录下：父组件传递url时必须用require包裹路径，示例：

    const goods = {
      url: require('@/assets/goods1.png'),
      name: '商品1',
      price: '99'
    }
    

    直接传递相对路径字符串不会被webpack编译处理，打包后会出现路径404问题。
• 校验url字段本身有效性
  在子组件mounted钩子中打印接收的props对象，确认url字段的值是否符合预期：

  mounted() {
    console.log('接收的url值：', this.goods.url)
  }
  

  若打印结果为undefined，检查父组件传递对象时的字段名是否存在拼写错误、大小写不一致的问题；若url为外部链接，可直接复制到浏览器地址栏访问，确认是否存在资源失效、防盗链、跨域限制等问题。

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