Vue.jsコンポーネントイメージブランク

Question

Vue.jsの画像タグのsrcに計算されたプロパティをバインドしました。コードは修正されているように見えますが、一貫してうまく動作しません。さらに、​​ページに切り替えてメインの書籍ページに戻すと、常にイメージが正しく表示されます。

この問題を引き起こす可能性のある情報はすばらしいと思われます。

Aアプリのバージョンをホストし、ここで利用可能である：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

Answer 2

を作成したステファン・vが指摘@として、問題はimg高さと幅のCSSプロパティとありました。 .imageクラスはwidth: 150px; height: 100%;に設定されていましたが、イメージのsrcはVueのライフサイクルフックが完了するまで設定されていないため、CSSはルートからの切り替えや戻しなどの再レンダリングを強制するまで正しく適用されませんでした。

私はそうのようなimg周りコンテナdivを作成することによって、これを解決：

：

<div class="image-container"> 
    <img :src="'/static/img/' + image" class="image"> 
</div> 

は、次にハード値に設定するだけで、子imgwidthプロパティで、min-heightとmin-widthを使用してコンテナのサイズを設定します

> .image-container { 
    min-width: 150px; 
    min-height: 100%; 

    img { width: 150px; } 
} 

このようにすると、ダイナミックなCSS値（幅または高さのルールの割合）が動的に適用されることがなくなりますsrcを設定します。