【vue-media-upload】一个好用的上传图片的组件，注意事项

一、问题

media 的saved 数组中的图片使用的是location + 相对路径，但是我的业务需要直接根据图片链接展示图片，而且用的也不是location

相关源代码

<div v-for="(image, index) in savedMedia" :key="index" class="mu-image-container"><img :src="location +'/'+ image.name" alt=""  class="mu-images-preview"><button @click="removeSavedMedia(index)" class="mu-close-btn" type="button"><svg> ...</svg></button>
</div>

二、解决

下载源代码，修改，作为组件手动导入到项目中使用

1. 将源代码的 src 文件放置到这个目录
   
2. 修改导入方式（之前用的是yarn add 安装的，现在我们直接从上面的文件夹中导入）

import Uploader from '@/components/vue-media-upload/src/Uploader.vue';

3. 修改源代码
   

// 把 local 去除
<div v-for="(image, index) in savedMedia" :key="index" class="mu-image-container"><img :src="image.name" alt=""  class="mu-images-preview"><button @click="removeSavedMedia(index)" class="mu-close-btn" type="button"><svg> ...</svg></button>
</div>

把这个删掉

三、结果展示

记得按照自己项目的方式，给 saved 赋予合适的初始值，这些初始值就会展示在界面上