laravel - vuejs本地图片预览，怎么获取图片src？

问题描述

问 题

vuejs本地图片预览，怎么获取图片src？

组件ImagePreview.vue

<template>
    <div class="card text-center" style="width: 16rem;">
        <img class="card-img" :src="imgDataUrl" style="height: 16rem;">
        <div class="card-footer text-muted">
            <input type="file" id="image" name="image" @change="preview($event)">
        </div>
    </div>
</template>

<script>
    export default {
        data(){
            return {
                imgDataUrl: ''
            }
        },
        methods: {
            preview(event){
                this.imgDataUrl = event.target.files;
            }
        }
    }
</script>

问题：
点击一张图片后，图片不能显示，在浏览器调试窗口中显示src="[object File]",要怎么写才可以？
preview方法里面下面两种写法都不行。

event.target.files
event.target.files[0]

解决方案

event.target.value这个是src

这篇关于laravel - vuejs本地图片预览，怎么获取图片src？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！