vue外链视频，vue 下载外链图片

Vue的外链视频以及下载外链图片详解

什么是Vue的外链视频？

Vue的外链视频就是将视频文件放置在云端，然后通过链接的方式嵌入到Vue应用中，让用户可以在应用内直接观看视频。

Vue中使用外链视频的步骤

1. 在Vue中使用iframe标签，将链接嵌入到应用中：


<iframe src='https://video-url-here'></iframe>


2. 该链接指向网页中的视频文件，用户可以直接在Vue应用中观看视频。

如何下载Vue中的外链图片？

1. 在Vue中使用Img标签，将图片链接嵌入到应用中：


<img src='https://image-url-here' />


2. 在Vue中使用第三方库如Axios，使用get方法向服务器请求获得该图片的二进制数据：


axios.get('https://image-url-here',{
responseType: 'arraybuffer'
}).then(res => {
let blob = new Blob([res.data],{type: 'image/jpeg'});
let url = URL.createObjectURL(blob);
let link = document.createElement('a');
link.style.display = 'none';
link.href = url;
link.setAttribute('download', 'your-image-name.jpg');
document.body.appendChild(link);
link.click();
})


3. 通过获取到的二进制数据，使用Blob和URL.createObjectURL()将二进制数据转化为可供下载的地址。再创建一个元素链接，并将地址赋值给它，然后添加到网页中。通过点击链接，用户可以下载图片到本地。

小结

在Vue应用开发中使用外链视频和图片可以帮助开发人员节省服务器存储资源，同时优化应用性能。上述方法可以帮助开发人员轻松地将视频和图片嵌入到Vue应用中，并且让用户可通过应用内或外链接访问到。