Question

我在项目导航栏中的nuxt：src =“ require（'path / to / image'+ dynamic.variable）”中使用vue-webpack图像的动态源。如果用户通过重新获取其信息并删除其先前图像的表单替换其图像，则会得到未找到的webpack错误模块（img）（找不到新的图像）：有没有办法解决此问题，例如等待webpack HRM完成吗？

我尝试在用户重新获取之前将setTimeout（）设置为一秒钟，并且它可以正常工作，但是我不喜欢随机等待，我会使用Promise或同步动态，重点是webpack热重新加载不是由我的函数控制的。.我也尝试将动态路径设置为计算值：但不能解决。

我的图片标签：

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

我的Useredit页面方法：

...
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（'用户重新加载..'）”之后和“ console.log（'用户重新加载'。）;”之前，它与文件上传或服务器响应无关。我破坏了许多小功能，只是为了检查功能的进展及其异步动态，但是唯一无法管理的功能是webpack hot reload：/

我希望用户上传他们的图像，并在提交表单后在导航栏中看到他们的徽标更新。

Answer 1

首先，正如有人在评论中告诉您的那样，不应将webpack hmr用于生产。

在Nuxt中，将从资源文件夹中引用的所有内容进行优化，并将其捆绑到项目包中。因此，此文件夹的理想用例是所有可以打包和优化的资产，并且它们极有可能不会发生变化，例如字体，css，背景图像，图标等。

然后，当webpack构建用于本地开发的站点或构建用于生成生产包的站点时，require仅由webpack调用一次。您遇到的问题是，在开发过程中您删除了原始文件，而webpack尝试读取它并失败。

对于用户上传的这些图像，我认为您应该使用static folder而不是使用require，而必须使用：prc来更改

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

让我知道这是否有帮助。

Answer 2

好的，我可能已经解决了。

HMR：您当然正确。感谢您指出，对不起，我是一个初学者，我会一路上努力理解。
Aldarund，谢谢您，不更改路径并将其缓存在客户端的想法。.我实在太笨拙，无法理解如何实现它（:)），但这给了我一个很好的提示：解决方案是保留图像名称为用户ID +'.png'扩展名，并使用jimp管理图像，以便图像名称，扩展名和文件类型始终相同，并且无论是否使用webpack编译新路径，我始终正确的require（）。
Jair，感谢您的帮助，我没有走这条路，但是如果我的方式出现错误，我会保留第二次机会。只是具体来说：错误是在找不到图像并要求输入新图像而不是旧图像的名称时出现的，因为我在问题中写道：发生此错误是因为fetchUser（）函数重新加载了用户信息，包括新的图像名称。

你们是否看到我的方法学将来有任何问题？真的谢谢您的回答。我一个人学习，很高兴获得支持。

nuxt中的图像require（），由HRM Webpack进行热重载

2 个答案: