图片 URL 没有进入 Vue 组件？答案

【问题标题】：Image URL not entering into a Vue component?图片 URL 没有进入 Vue 组件？
【发布时间】：2020-12-23 03:07:09
【问题描述】：

我正在尝试制作一个 vue 标签组件，但我无法将源代码扔到模板中

html

<card 
  aposter="assets\images\poster.png" 
  aname="a title"> </card>

JavaScript

Vue.component('card', {
  props: ['aposter', 'aname'],
  template: `
    <div>
    <img src="{{aposter}}"/>
      <br>
      <p>{{ aname }}</p>
    </div>
  `
})

但 img src 执行为：src="{{poster}}" 并没有将实际链接放入图像

我尝试了很多修复它我似乎没有发现什么我做错了什么？

【问题讨论】：

标签： javascript html vue.js vue-component vue-props

【解决方案1】：

你必须绑定 src 属性

更改您的模板：

    Vue.component('card', {
      props: ['aposter', 'aname'],
      template: `
        <div>
        <img :src="aposter"/>
          <br>
          <p>{{ aname }}</p>
        </div>
      `
    })

这会将 src 属性绑定到 aposter 属性。您可以在此处阅读有关 Vue 绑定的更多信息：Vue Template Syntax

:src 是v-bind:src 的简写

【讨论】：