javascript，vue实现图片下载到本地

图片下载到本地"/>

javascript，vue实现图片下载到本地

原生js中：

<img src="./boy.png" class="img1"></img>
<input type="button" value="下载" onclick="down('img1')">

function down(selector, name) {  // 生成一个a元素var a = document.createElement('a')// 将a的download属性设置为我们想要下载的图片名称a.download = name || 'pic'// 将生成的URL设置为a.href属性a.href = './boy.png'// 触发a的单击事件a.click();
}

注意⚠️：图片和html文件要是同源，不然会失效。

vue中：

<div><img src="../../../img/logo.png" alt=""><p @click="downs">下 载</p>
</div>

data{imgs:require("../../../img/logo.png")
}

methods:{downs() {//必须同源才能下载var alink = document.createElement("a");alink.href = this.imgs;alink.download = "pic"; //图片名alink.click();}}

注意⚠️：图片和html文件要是同源，不然会失效。

附上：a标签使用方法详解