Switch out the image for a placeholder whenever the src is updated

Question

Switch out the image for a placeholder whenever the src is updated

I need to update an image with a dynamic src value

<img :src="image.url">

Currently, when the image.url changes, the old image remains in place until the new one loads. This delay can create a strange effect as the text details change before the image updates.

Is there a way to substitute the image with a loading indicator whenever the src property changes using vue.js?

I know I could manually manipulate the DOM with the code that triggers the change, but I'd prefer to handle it the correct way using vue bindings.

vue.js

Answer 1

Answer №1

To steer you in the right direction, consider the following:

Include an attribute called imageLoading in your data() function.

Define your :src as shown here:

<img :src="imageLoading ? ./myPlaceholder.png : image.url" />

Use $watch to monitor changes in image.url and update the loading image when necessary:

watch: {
  'image.url': function() {
    this.imageLoading = true;
  }

Implement an @load handler on your img tag to set imageLoading to false once the image is loaded:
```
<img :src="imageLoading ? ./myPlaceholder.png : image.url" @load="imageLoading = false" />
```

A side note on the @load handler - credit goes to this question, which provides a helpful example.

Answer 2

To steer you in the right direction, consider the following:

Include an attribute called imageLoading in your data() function.

Define your :src as shown here:

<img :src="imageLoading ? ./myPlaceholder.png : image.url" />

Use $watch to monitor changes in image.url and update the loading image when necessary:

watch: {
  'image.url': function() {
    this.imageLoading = true;
  }

Implement an @load handler on your img tag to set imageLoading to false once the image is loaded:
```
<img :src="imageLoading ? ./myPlaceholder.png : image.url" @load="imageLoading = false" />
```

A side note on the @load handler - credit goes to this question, which provides a helpful example.

Answer 3

Answer №2

This component serves as a simple placeholder for images, utilizing slots to showcase any placeholder content

<template>
  <div class="image">
    <img :src="src" @load="ready = true" v-show="ready">
    <slot v-if="!ready" />
  </div>
</template>

<script>
export default {
  props: ['src'],
  data: () => ({
    ready: false
  }),
  watch: {
    src () { this.ready = false }
  }
}
</script>

Instructions on how to use it:

<image-placeholder src="IMAGE_URL">
  <b>INSERT PLACEHOLDER CONTENT HERE</b>
  <p>Can be anything</p>
  <img src="ANOTHER_IMAGE_URL" />
</image-placeholder>

Answer 4

This component serves as a simple placeholder for images, utilizing slots to showcase any placeholder content

<template>
  <div class="image">
    <img :src="src" @load="ready = true" v-show="ready">
    <slot v-if="!ready" />
  </div>
</template>

<script>
export default {
  props: ['src'],
  data: () => ({
    ready: false
  }),
  watch: {
    src () { this.ready = false }
  }
}
</script>

Instructions on how to use it:

<image-placeholder src="IMAGE_URL">
  <b>INSERT PLACEHOLDER CONTENT HERE</b>
  <p>Can be anything</p>
  <img src="ANOTHER_IMAGE_URL" />
</image-placeholder>

Switch out the image for a placeholder whenever the src is updated

Answer №1

Answer №2

Similar questions

Instructions for showcasing a 404 error page in the event that a back-end GET request to an API fails due to the absence of a user. This guide will detail the process of separating the

Hidden content from Vue router view

Adjust the scroll position when the height of a div is modified

How can I assign a distinct identifier to individual instances of Vue.js components?

Vue.js: Select a different div within the Vue object instead of the one that is bound

A Guide to Organizing Vue Js: Dividing 'methods', 'data', 'computed', and More into Separate JavaScript Files

How can I toggle button states within a v-for loop based on input changes in Vue.js?

Adding npm packages to your Vue.js application

Utilizing Vue 3, Quasar 2.2.2, and Firebase for accessing GlobalProperties via the router

Utilizing Laravel to Retrieve Information from an API

What are some creative ways to customize v-slot:cell templates?

Encountering the error message "Failed to load resource: the server responded with a status of 500 (Internal Server Error)" while using Django and Vue on my website

After refreshing the page, vuex is encountering null values when using firebase.auth().onAuthStateChanged

Utilizing Axios to send multiple concurrent requests in Vue.js

Encountering an error while running Laravel Mix's npm development script

[VUE Alert]: Rendering Error - "Sorry, there is a type error: object is currently undefined."

I am interested in incorporating `connect-history-api-fallback` into my project in Vue.js, but I am unsure about the implementation

Creating a distinctive vue form component from scratch

What does the `Class<Component>` represent in JavaScript?

accessing elements in a loop in vuejs