在Vue.js中如何通过props传递img标签的src属性值？

错误原因 #

• 子组件info-card.vue中，图片src属性直接使用{{ }}插值是无效的，Vue规定HTML标签的属性动态绑定必须使用v-bind指令，可简写为:。
• 若父组件未完成子组件的注册，也会导致组件不渲染、内容不生效。

修复后的代码 #

info-card.vue #

<template>
    <div class="card-container glass-effect">
        <div class="illustration-container">
            <!-- 修改src绑定方式 -->
            <img :src="image" alt="Businesses" class="illustration">
        </div>
        <div class="title-container">{{ title }}</div>
        <div class="paragraph-container">{{ content }}</div>
    </div>
</template>

<script>
export default {
    props: ['image','title', 'content']
}
</script>

landing-info.vue（补充组件注册逻辑） #

如果之前没有注册组件，需要补充引入和注册代码：

<template>
  <div class="business-side">
      <info-card image="/images/image1.png" title="BUSINESSES" content="This is some content"></info-card>
  </div>
  <div class="customer-side">
      <info-card image="/images/image2.png" title="CUSTOMERS" content="This is some content"></info-card>
  </div>
</template>
<script>
// 注意替换为你项目中info-card.vue的实际相对路径
import InfoCard from './info-card.vue'

export default {
  components: {
    InfoCard
  }
}
</script>

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