这是我的问题,我正在使用 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很好找的
感谢您的宝贵时间...
西蒙
最佳答案
我终于找到了一种使用 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)
})
},
关于javascript - 找不到 VueJs 模块 Axios 帖子,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49305303/