【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>
二、解决
下载源代码，修改，作为组件手动导入到项目中使用
- 将源代码的 src 文件放置到这个目录
- 修改导入方式（之前用的是yarn add 安装的，现在我们直接从上面的文件夹中导入）
import Uploader from '@/components/vue-media-upload/src/Uploader.vue';
- 修改源代码
// 把 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 赋予合适的初始值，这些初始值就会展示在界面上