javascript - Vue.js component image blank -
i've bound computed property src of image tag in vue.js. code appears correct, not work consistently baffling me. additionally, switching /about page , main books page displays images.
any information causing issue wonderful!
a hosted version of app available here: https://books.surge.sh/
the relevant code book-item component.
the code generating book component , image src follows:
<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> partially displayed book covers on initial load:
the problem .image 'width' style. should assign .image class after component renders. this:
<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 'state' data }; }, computed: { imgsrc() { return `/static/img/${this.book.image}`; } }, mounted() { // 3. assign class image // after component did mounted (nexttick() did not helped) settimeout(() => { this.componentloaded = true; }, 1); } }; </script>good luck ! created pull request here
Comments
Post a Comment