Question

我是vue的新手，正在尝试按照教程学习。我正在尝试通过与我的文章ID相关的图像。

其他所有操作都正常，article.id等。图像暂时与article.id具有相同的文件名，所以我只想将其拉入组件。

<div class="card bg-dark mb-2" v-for="article in articles" v-bind:key="article.id">
  <div class="card-body">
    <img class="card-img-top" v-bind:src="images/articles/`{{ $article.id }}`.jpg" width="100%" alt="Card image cap" />
    <h5 class="card-title  text-white">{{ article.id }}. {{ article.title }}</h5>
    <h6 class="card-subtitle mb-2 text-white-50">{{ article.from }}</h6>
    <p class="card-text text-truncate" style="max-width: 150px;">{{ article.description }}</p>
  </div>
  <div class="card-footer text-right">
    <small class="text-white-50">Added by <span class="text-white">{{ article.added_by }}</span> ({{ article.created_at }})</small>
  </div>
</div>

请告知我是否需要提供其他信息。

更新：

我不知道它是否有作用，但是正在使用的article.id是从我创建的Laravel API中提取的。

#app div位于我的index.blade.php文件中

export default {
data() {
  return {
    articles: [],
    article: {
      id: '',
      title: '',
      description: '',
      from: '',
      rating: '',
      from: '',
      created_at: '',
      added_by: ''
    },
    recipe_id: '',
    pagination: {},
    edit: false
  }
},

created() {
  this.fetchArticles();
}, 

methods: {
  fetchArticles(page_url) {
    let vm = this;
    page_url = page_url || '/api/articles'
    fetch(page_url)
    .then(res => res.json())
    .then(res => {
      this.articles = res.data;
      vm.makePagination(res.meta, res.links);
    })
    .catch(err => console.log(err))
  },

  makePagination(meta, links) {
    let pagination = {
      current_page : meta.current_page,
      last_page : meta.last_page,
      next_page_url : links.next,
      prev_page_url : links.prev
    };

    this.pagination = pagination;
  }
}

Answer 1

绑定属性被解析为javascript。因此，如果您想要商品images/articles/123.jpg的字符串123，则需要将其传递给:src属性，如下所示：

<img :src="`images/articles/${article.id}.jpg`" />

或

<img :src="'images/articles/' + article.id + '.jpg'" />

Answer 2

在HTML属性中不能使用胡子。而是使用v-bind指令（v-bind：src或：src）

您可以像这样绑定图像src：

html {
background-size:cover;
background-position:center center;
background-repeat: no-repeat;
}

You can see this working on the screenshot of the fiddle I developed for your answer

Check out the Fiddle :)

使用vue.js将`id`绑定到img src url

2 个答案: