Image require() in nuxt with hot reload by HRM webpack

Question

I use the dynamic source for vue-webpack images in nuxt :src="require('path/to/image' + dynamic.variable)" in my project navbar. If the users substitute their image through a form which refetches their information and deletes their previous image I get a webpack error module (img) not found (it does not find the new one): is there a way to solve this, like wait for webpack HRM to finish?

I tried setting up a setTimeout() of one second before user re-fetch and it works, but I don't like a random waiting, I'd use a promise or a sync dynamic, the point is webpack hot reload is not controlled by my functions.. I also tried with setting the dynamic path as a computed: but it doesn't fix.

My image tag:

<img v-if="this.$auth.user.image" class="userlogo m-2 rounded-circle" :src="require('@assets/images/users/' + this.$auth.user.image)" alt="usrimg">

My Useredit page methods:

...
methods: {
    userEdit() {
      //uploads the image
      if (this.formImageFilename.name) {
        let formImageData = new FormData()
        formImageData.append('file', this.formImageFilename)
        axios.post('/db/userimage', formImageData, { headers: { 'Content-Type': 'multipart/form-data' } })
        // once it has uploaded the new image, it deletes the old one 
        .then(res=>{this.deleteOldImage()})
        .catch(err=>{console.log(err)})
      }else{
        this.userUpdate() //if no new image has to be inserted, it proceeds to update the user information
      }
    },
    deleteOldImage(){
      if(this.$auth.user.image){axios.delete('/db/userimage', {data: {delimage: this.$auth.user.image}} )}
      console.log(this.$auth.user.image + ' deleted')
      this.userUpdate() // it has deleted the old image so it proceeds to update the user information
    },
    userUpdate(){
      axios.put(
        '/db/user', {
          id: this.id,
          name: this.formName,
          surname: this.formSurname,
          email: this.formEmail,
          password: this.formPassword,
          image: this.formImageFilename.name,
        })
      .then(() => { console.log('User updated'); this.userReload()}) // reloads the updated user information
      .catch(err => {console.log(err)} )
    },
    userReload(){
      console.log('User reloading..')
      this.$auth.fetchUser()
      .then(() => { console.log('User reloaded')})
      .catch(err => {console.log(err)} )
    },
  }
...

the problem happens after "console.log('User reloading..')" and before "console.log('User reloaded');", it is not related to the file upload nor the server response. I broke a single function in many little ones just to check the function progression and its asynchronous dynamics but the only one that is not manageable is the webpack hot reload :/

I'd like the users to upload their images and see their logo in the Navbar appear updated after submitting the form.

webpack hmr is for dev, not for production. The only way is to use static image pathes that are not processed by webpack — Aldarund
if u change image but dont change path it could be cached on client — Aldarund
how? I see a lot of websites in which you can change your image and see the effects of the change, should I use a loading animation? What is the standard? — AMDP

Jair Reina Jair Reina · Accepted Answer · 2019-04-18T22:37:50

First of all, as somebody told you in the comments, webpack hmr shouldn't be used for production.

In Nuxt, everything that you reference from the assets folder will be optimized and bundled into the project package. So the ideal use case for this folder is all assets that can be packaged and optimized, and most likely won't change like fonts, css, background images, icons, etc.

Then, require is called only once by webpack when it is either building the site for local development or building the site for generating a production package. The problem in your case is that you delete the original file while you're in development and webpack tries to read it and fails.

In the case of these images that the user uploads, I think you should use the static folder instead and instead of using require you'll have to change the :src with

:src="'/images/users/' + this.$auth.user.image"

Let me know if this helps.

Image require() in nuxt with hot reload by HRM webpack

2 Answers