vue 上传图片路径不对

Question

在网上找了个图片上传的示例，然后拉到vue2.0的项目中图片加载不出来，src=0，这是为什么
<template>
<div>

        <div style="margin-bottom: 20px">
            <h2>选择图片</h2>
            <a id='addPic' href="" v-on:click="addPic">添加图片 </a>
            <input type="file" @change="onFileChange" multiple style="display: none;">
        </div>
        <div v-if="images.length >0">
           <ul>
              <li v-for="(key,image) in images">
                
                 <img :src="image" @click='delImage(key)' />
                 <a href="#" style="position: absolute;" @click='delImage(key)'>
                    <span class="glyphicon glyphicon-remove"></span>
                </a>
              </li>
           </ul>
            <button @click="removeImage">移除全部图片</button>
            <button @click='uploadImage' >上传</button>
        </div>
    

</div>
</template>

<script type="es6">
import { Cell } from 'mint-ui';
import $ from 'jquery'
export default{

 data(){
  return {
    images: [],
  }

},
methods: {

        addPic(e){
            e.preventDefault();
            $('input[type=file]').trigger('click');
            return false;
        },
        onFileChange(e) {
            var files = e.target.files || e.dataTransfer.files;
            if (!files.length)return; 
            this.createImage(files);
        },
        createImage(file) {
            if(typeof FileReader==='undefined'){
                alert('您的浏览器不支持图片上传，请升级您的浏览器');
                return false;
            }
            var image = new Image();         
            var vm = this;
            var leng=file.length;
            for(var i=0;i<leng;i++){
                var reader = new FileReader();
                reader.readAsDataURL(file[i]); 
                reader.onload =function(e){
                vm.images.push(e.target.result);                                    
                };                 
            }                        
        },
        delImage:function(index){
            this.images.shift(index);
        },
        removeImage: function(e) {
            this.images = [];
        },
        uploadImage: function() {
            console.log(this.images);
            return false;
            var obj = {};
            obj.images=this.images
            $.ajax({
                type: 'post',
                url: "upload.php",
                data: obj,
                dataType: "json",
                success: function(data) {
                    if(data.status){
                        alert(data.msg);
                        return false;
                    }else{
                        alert(data.msg);
                        return false;
                    }
                }
            });
        }
    }

}
</script>
<style scoped="scoped">
p {

display: block;
-webkit-margin-before: 0em;
-webkit-margin-after: 0em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;

}
body {

background-color: #C4C4C4;

}
.mint-cell img {

vertical-align: middle;
margin-right: 10px;

}
</style>

Answer 1

因为你没有上传服务器，