Vue.js 如何将图像路径从标记传递到Vue组件

我想将由

Vue

生成的标记的图像路径传递到

Vue组件（MyPost）

：

---

您应该使用

：src

而不是

src

来表示您有一个表达式而不是静态文本：

<img :src="url" alt="post-picture">  

{{

和

}

只能在标记内容中使用，而不能在标记属性中使用

<img src="{{ url }}" alt="post-picture">    

<script>
    Vue.component('MyPost',{
        props: ['txt', 'url'],
        template: `
        <div class="col">
          <div class="card shadow-sm">
            //   this line didnt work
            <img src="{{ url }}" alt="post-picture">    
            <div class="card-body">
              <p class="card-text">{{txt}}</p>
              <div class="d-flex justify-content-between align-items-center">
                <div class="btn-group">
                  <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
                  <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
                </div>
                <small class="text-muted">9 mins</small>
              </div>
            </div>
          </div>
        </div>
        `
    });
   
    var app = new Vue({
        el: "#app",
    });
</script>

<img :src="url" alt="post-picture">