Vue.js component image blank

Question

I've bound a computed property to the src of an image tag in Vue.js. The code appears to correct, but does not work consistently which is baffling to me. Additionally, switching to the /about page and back to the main books page always properly displays the images.

Any information as to what could be causing this issue would be wonderful!

A hosted version of the app is available here: https://books.surge.sh/

The relevant code for the book-item component.

The full Github repo.

The code generating the book component and image src is as 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:

Seems like an issue with your CSS because if you open up chrome devtools and inspect the element you can always see the src tag and it links properly. When I simply set your img to display: block it already triggers and renders it. — Stephan-v
– Stephan-v, Commented Jul 28, 2017 at 7:13
*Update: Any layout change in any element will cause it to render as long as the content is repainted in any way. This might be a good start. — Stephan-v
– Stephan-v, Commented Jul 28, 2017 at 7:15

Stephan-v · Accepted Answer · 2017-07-28 08:28:57Z

1

The problem was with .image 'width' style. You should assign that .image class after your component renders. Do 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 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>

Good luck ! I created a pull request here

edited Jul 28, 2017 at 8:28

Stephan-v

20.5k32 gold badges125 silver badges213 bronze badges

answered Jul 28, 2017 at 7:28

Andrii Kudriavtsev

1,36413 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Robert Benjamin Over a year ago

Thanks so much for your help! I found out a way to get it working with just CSS changes, but it was super helpful to realize that the issue was related to the image's height / width CSS properties.

Robert Benjamin · Accepted Answer · 2017-07-28 19:24:54Z

As @Stephan-v pointed out, the issue was with the img height and width CSS properties. The .image class had been set to width: 150px; height: 100%; but since the image src isn't set until Vue's lifecycle hooks complete, the CSS hadn't properly applying until something forced a re-render, such as switching out of the route and back.

I solved this by creating a container div around the img like so:

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

Then setting the container size using min-height and min-width, with only the child img width property set to a hard value:

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

  img { width: 150px; }
}

Doing so prevents any "dynamic" CSS values (percent width or height rules) from applying to a image with a dynamically set src.

Collectives™ on Stack Overflow

Vue.js component image blank

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related