Question

我正在尝试制作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 =“ {{aposter}}” 并且没有将实际链接放置到图像上

我试图对其进行大量修复，但似乎没有发现我在做什么错？

Answer 1

您必须绑定 src属性

更改模板：

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

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

:src是v-bind:src

的简写

图片网址未进入Vue组件？

1 个答案: