javascript - Vue.js 组件图像空白

Question

我已将计算属性绑定(bind)到 Vue.js 中图像标记的 src 。该代码似乎是正确的，但不能一致地工作，这让我感到困惑。此外，切换到 /about 页面并返回主图书页面始终可以正确显示图像。

任何有关可能导致此问题的原因的信息都会很棒!

此处提供了该应用程序的托管版本:https://books.surge.sh/

The relevant code for the book-item component.

The full Github repo.

生成书籍组件和图像src的代码如下:

<template>
  <article class="book-item">
    <img :src="imgSrc" class="image">
    <div class="meta">
      <div class="name">{{ book.title }}</div>*
      <div class="author">{{ book.author }}</div>
    </div>
    <div class="description">
      <p v-html="book.description"></p>
    </div>
  </article>
</template>

<script>
export default {
  props: ['book'],
  computed: {
    imgSrc() {
      return `/static/img/${this.book.image}`;
    }
  }
};
</script>

初始加载时部分显示的书籍封面:

Answer 1

问题出在 .image 'width' 样式上。您应该在组件渲染后分配该 .image 类。这样做:

<template>
  <article class="book-item">
    <img :src="imgSrc" :class="{image: componentLoaded}"> <!-- 1. change class -->
    <div class="meta">
      <div class="name">{{ book.title }}</div>*
      <div class="author">{{ book.author }}</div>
    </div>
    <div class="description">
      <p v-html="book.description"></p>
    </div>
  </article>
</template>

<script>
export default {
  props: ['book'],
  data() {
    return {
      componentLoaded: false           // 2. add this 'state' data
    };
  },
  computed: {
    imgSrc() {
      return `/static/img/${this.book.image}`;
    }
  },
  mounted() {
    // 3. This will assign class to your image
    // after component did mounted (nextTick() did not helped)
    setTimeout(() => {
      this.componentLoaded = true;
    }, 1);
  }
};
</script>

祝你好运!我创建了一个拉取请求 here