时间戳

首页 > 解决方案 > 图片 URL 没有进入 Vue 组件？

javascript - 图片 URL 没有进入 Vue 组件？

问题描述

我正在尝试制作一个 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}}"并没有将实际链接放入图像

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

标签： javascripthtmlvue.jsvue-componentvue-props

解决方案

您必须绑定src 属性

更改您的模板：

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

这会将 src 属性绑定到 海报道具。您可以在此处阅读有关 Vue 绑定的更多信息：Vue 模板语法

:src是的简写v-bind:src

推荐阅读