javascript - 找不到 VueJs 模块 Axios 帖子

Question

这是我的问题，我正在使用 VueJs 并且当我将图像发布到我的服务器时，我的服务器修改此图像并创建另一个图像并返回新文件的名称给我，但是当我尝试使用新路径 require() 我的新 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>

这是我的文件路径声明:

export default {

  data() {
    return {
      codeStep: 0,
      cancelText: "Cancel",
      nextText: "Blur",
      finishText: "Finish",
      filename: require('../../images/default-image.png'),
      attachments: [],
      data: new FormData(),
      errors: {},
      percentCompleted: 0,
    }
  },

还有我发布我的功能，例如我得到一个文件名.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)
      })
  },

这是我控制台上的错误:

Error: Cannot find module './goku.jpg'. at webpackContextResolve (.$:24) at webpackContext (.$:19) at upload.vue?4b64:134 at

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

ps:第一个default-image.png是vuejs很好找的

感谢您的宝贵时间...

西蒙

Answer 1

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

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