vue获取本地图片路径
时间: 2023-08-12 08:41:52 浏览: 210
获取本地图片
你可以使用HTML5的File API来获取本地图片路径,以下是一个使用Vue的示例:
```html
<template>
<div>
<input type="file" @change="onFileChange">
<img :src="imageUrl" v-if="imageUrl">
</div>
</template>
<script>
export default {
data() {
return {
imageUrl: ''
}
},
methods: {
onFileChange(e) {
const file = e.target.files[0]
const reader = new FileReader()
reader.onload = (e) => {
this.imageUrl = e.target.result
}
reader.readAsDataURL(file)
}
}
}
</script>
```
在这个示例中,我们使用`<input type="file">`元素来让用户选择本地图片。当用户选择了图片后,我们使用`FileReader`对象来读取图片文件,并将读取到的数据URL赋值给`imageUrl`变量。最后,我们使用`<img>`元素来显示图片。
阅读全文