Javascript 找不到VueJs模块Axios Post

这是我的问题，我正在使用VueJs，当我将一个图像发布到我的服务器时，我的服务器会修改此图像并创建另一个图像，并返回新文件的名称，但当我尝试要求（）使用新路径创建新img时，会出现错误。。。这是我的Html：

<template>
  <div id="app">
    <div v-if="codeStep == 0">
      <img class="upload_img" :src="filename" />
      <label id="selectfile_button" for="files_selecter" class="btn">Select Image</label>
      <input id="files_selecter" type="file" style="visibility:hidden;" @change="onFileChange"/>
    </div>
    <div v-else="">
      <img class="upload_img" :src="filename" />
      <p> {{ percentCompleted }} </p>
      <button v-on:click="removeImage">{{ cancelText }}</button>
      <button v-if="codeStep == 1" v-on:click="submit">{{ nextText }}</button>
      <button v-else="" v-on:click="finishText">{{ finishText }}</button>
    </div>
  </div>
</template>

还有我的发布函数，在这里我得到一个filename.jpg，例如：

  submit() {
    this.prepareFields();
    var config = {
      header: {'Content-Type': 'multipart/form-data'},
      onUploadProgress: function(progressEvent) {
        this.percentCompleted = Math.round( (progressEvent.loaded * 100) / progressEvent.total );
        this.$forceUpdate();
      }.bind(this)
    };
    let self = this;
    axios.post('/api/upload', this.data, config)
      .then(function (response) {
        console.log(response);
        console.log('Successful Upload');
        console.log(response.data)
        var res = response.data.filePath;
        console.log(res)

        // The error is here
        self.filename = require('../../images/' + res);
        self.codeStep = 2;
      })
      .catch(function(error){
        console.log(error)
      })
  },

以下是我的控制台上的错误：

错误：找不到模块'./goku.jpg'。 在webpackContextResolve（.$：24） 在webpackContext中（.$：19） 上传时。vue？4b64:134 在

我推测可能是vueJs require不支持在运行时调用新文件，因为它将所有内容存储在dist/

ps:vuejs很好地找到了第一个默认值-image.png

谢谢你的时间

---

西蒙

我终于找到了一种方法，用require显示我的img。 我没有将图像保存在/image中，而是将其存储在/wwwroot/images/中，这是Vuejs webpack RootPath的子目录。这样，我现在可以直接从Url访问我的图像，例如：localhost:8080/images/example.jpg

---

我认为它的原因是需要有一个相对的url。这意味着图像必须在你的本地图像中。据我所知，成功后，你会得到这个形象的名字。相反，你不能得到图片的完整url并显示它吗？如果您的服务器存储图像。然后您可以将整个图像发送到前端，并要求用户在本地存储。是的，这是在成功之后，当我尝试要求其目录中的文件时，我有模块未找到错误。所以你认为我应该尝试将整个图像以二进制/流的形式发送到前端，然后存储它，而不是发送图像名称？因为我只需要在我的网站上显示新图像。是的，你必须这样做。将整个图像发送到前端。另一种解决方案是将转换后的映像的二进制或base64格式存储在服务器数据库中。因此，每当用户要求相同的图像时，将存储的图像二进制文件发送到前端并显示它。还有一件事你不需要在前端存储二进制文件，如果你只是想显示的话。将二进制文件转换为dataurl，并将dataurl附加到图像源。

  submit() {
    this.prepareFields();
    var config = {
      header: {'Content-Type': 'multipart/form-data'},
      onUploadProgress: function(progressEvent) {
        this.percentCompleted = Math.round( (progressEvent.loaded * 100) / progressEvent.total );
        this.$forceUpdate();
      }.bind(this)
    };
    let self = this;
    axios.post('/api/upload', this.data, config)
      .then(function (response) {
        console.log(response);
        console.log('Successful Upload');
        console.log(response.data)
        var res = response.data.filePath;
        console.log(res)

        // The error is here
        self.filename = require('../../images/' + res);
        self.codeStep = 2;
      })
      .catch(function(error){
        console.log(error)
      })
  },

axios.post('/api/upload', this.data, config)
      .then(function (response) {
        console.log(response);
        console.log('Successful Upload');
        console.log(response.data)
        var res = response.data.filePath;
        console.log(res)

        // The SOLUTION is here
        self.filename = 'images/' + res;
        self.codeStep = 2;
      })
      .catch(function(error){
        console.log(error)
      })
  },