vue显示本地图片失败

Question

我需要在vue的img里直接显示本地路径的图片，原因是我的图片名是动态后端获取的，但是控制台会报错Not allowed to load local resource，createObjectURL无效，请问要如何解决

export default {
    data() {
        return {
            imageUrls: []
        }
    },

    mounted() {
        API({
            url: 'http://127.0.0.1:8000/K_means',
            method: 'get'
        }).then((res) => {
            this.$nextTick(() => {

                console.log(res.data.image_urls)
                this.imageUrls = res.data.image_urls
            })
        }).catch(error => {
            console.log(error)
        })
    },
    
}


</script>

<template>
    <div>
        <div v-for="(image, index) in imageUrls" :key="index">
            <img :src="`D:/pycharmentryprice/djangoProject/Invertor/static_file/${image}`" alt="My Plot">
        </div>
    </div>
</template>

Answer 1

在VueCli中 调用data函数中的数据需要添加this不然会获取不到的
因为这个图片不是静态图片，可以查看一下是否可以访问到地址

 <div>
     <div v-for="(image, index) in this.imageUrls" :key="index">
        <img :src="`D:/pycharmentryprice/djangoProject/Invertor/static_file/${image}`" alt="My Plot">
     </div>
 </div>