Image require () в nuxt с горячей перезагрузкой через веб-пакет HRM

Question

Я использую динамический источник для изображений vue-webpack в nuxt: src = "require ('path / to / image' + dynamic.variable)" в панели проекта моего проекта. Если пользователи подставляют свое изображение через форму, которая обновляет их информацию и удаляет их предыдущее изображение, я получаю модуль ошибки webpack (img), не найденный (он не находит новое): есть ли способ решить эту проблему, например, ждать Веб-пакет HRM, чтобы закончить?

Я пытался настроить setTimeout () за одну секунду до повторной загрузки пользователя, и это работает, но мне не нравится случайное ожидание, я бы использовал обещание или динамическую синхронизацию, дело в горячей перезагрузке веб-пакета не контролируется моими функциями .. Я также пытался установить динамический путь как вычисленный: но это не исправляет.

Мой тег изображения:

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

Мои методы использования страницы:

...
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)} )
    },
  }
...

проблема возникает после "console.log ('User reloading ..')" и перед "console.log ('User reloaded');"; она не связана ни с загрузкой файла, ни с ответом сервера. Я сломал одну функцию во многих маленьких, чтобы проверить прогрессию функции и ее асинхронную динамику, но единственной неуправляемой является горячая перезагрузка веб-пакета: /

Я бы хотел, чтобы пользователи загружали свои изображения и видели, как их логотип на панели навигации отображается обновленным после отправки формы.

Answer 1

Прежде всего, как вам сказали в комментариях, webpack hmr не должен использоваться для производства.

В Nuxt все, на что вы ссылаетесь из папки ресурсов, будет оптимизировано и упаковано в пакет проекта. Поэтому идеальным вариантом использования этой папки являются все ресурсы, которые можно упаковать и оптимизировать, и, скорее всего, они не изменятся, например шрифты, CSS, фоновые изображения, значки и т. Д.

Затем веб-пакет вызывает только один раз, когда он создает сайт для локальной разработки или создает сайт для создания производственного пакета. Проблема в вашем случае заключается в том, что вы удаляете исходный файл во время разработки, а веб-пакет пытается его прочитать и не удается.

В случае этих изображений, которые пользователь загружает, я думаю, что вы должны использовать статическую папку вместо этого и вместо использования require вам придется изменить: src на

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

Дайте мне знать, если это поможет.

Answer 2

Хорошо, я, наверное, решил.

1. HMR: вы, конечно, правы. Спасибо, что указали, извините, я новичок, и я пытаюсь понять вещи по пути.
2. Альдарунд, спасибо, ваша идея не менять путь и кэшировать его на стороне клиента. Я слишком нуб, чтобы понять, как я могу это реализовать (:)), но это дало мне хороший совет: решение было сохранить имя изображения в качестве идентификатора пользователя + расширение «.png» и для управления изображением с помощью jimp, чтобы имя изображения, расширение и тип файла всегда были одинаковыми, а также с или без веб-пакета, компилирующего новый путь, у меня всегда есть правильное требование ().
3. Джейр, спасибо за помощь, я не пошел по этому пути, но оставлю это в качестве второго шанса, если мой путь приведет к ошибкам. Просто чтобы быть конкретным: ошибка возникает, когда он не находит - и просит имя - НОВОЕ изображение, а не старое, как я писал в моем вопросе: это происходит потому, что функции fetchUser () перезагружают информацию пользователя, включая имя нового изображения.

Ребята, вы видите какие-нибудь будущие проблемы в моей методологии? Действительно спасибо за ваши ответы. Я учусь один, и мне очень приятно получать поддержку.