我已将计算属性绑定(bind)到 Vue.js 中图像标记的 src
。该代码似乎是正确的,但不能一致地工作,这让我感到困惑。此外,切换到 /about
页面并返回主图书页面始终可以正确显示图像。
任何有关可能导致此问题的原因的信息都会很棒!
此处提供了该应用程序的托管版本:https://books.surge.sh/
The relevant code for the book-item component.
生成书籍组件和图像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>
初始加载时部分显示的书籍封面:
最佳答案
问题出在 .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
关于javascript - Vue.js 组件图像空白,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45365644/