vue显示本地图片失败

我需要在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)
        })
    },
    
}




<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>

在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>

出于安全考虑，浏览器是禁止网页访问本地文件的。
要解决这个问题，应该是需要进行虚拟路径配置，需要后端进行配置。

@Configuration
public class MyConfig implements WebMvcConfigurer {
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/product/**").addResourceLocations("file:D:/pycharmentryprice/djangoProject/Invertor/static_file");
    }
}

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