element-image显示本地不存在图片处理

项目背景

vue前端+django后端
后端给出图片名称，前端通过拼接获取本地文件夹里图片的地址，在浏览器界面上展示出来。图片以组为单位，每组有至少一张图片，支持滑块展示。

失败方法

1. el-image 自带的slot=error处理 ，由于slot处理是在el-image的插槽，而src获取图片失败后，一直就在error render的状态，以为和图片的静态获取和动态获取有关，但无论是哪种依旧无法在找不到图片地址的情况下，进入插槽的error处理；
   （有关vue静态和动态获取图片的参考：link. 这个对我没有用，但或许对你有用）
2. img onerror 在找到的一些参考资料里有提到，这个似乎只能作用一次，而我的项目里的图片以组展示，例如3张图片一组，可能3张都没有本地对应的图片，亦或者第1张没有对应的图片，但我需要展示有的图片，对于没有的图片以default Image来替代。所以这个方法也失效；
3. img :src=“判断图片是否存在”，将html的静态/动态获取图片地址的方法写道javascript中，但给出的是not allowed to load local resource的错误提示，即便可以获取到存在的图片地址，但也因为浏览器的保护机制，禁止直接访问本地资源。对于这种问题的处理一般采用；
4. require.context()判断文件是否存在，想着既然el-image和img自身的错误处理都失败了，那么是否可以在获取到后端数据之后，展示之前先判断文件是否存在，将不存在的替换成 default Image呢？但在传参失败查找require.context()的使用方法时才发现，原来其不支持在访问的文件地址里传参，例如 <上装/长袖> <下装/裙子>的父文件夹 <上装> <下装> 就不能以参数的方式传到filepath中 ；
   （这里有个关于require.context()解释说明很好blog，可以有需要参考：链接: link.）
5. 用node.js 中的fs模块判断文件是否存在，由于require.context()无法传参就想到了用node自身有点模块来判断文件是否存在，这些文章我都试过了，但是也没有成功：link, link；

成功方法

这个方法其实是将el-iamge 的error直接赋给了template。不需要考虑本地资源映射的问题。并且实现了图片滑块，有的显示，没有的显示预设的默认图片。

//html
<el-carousel trigger="click" height="150px">
   <el-carousel-item v-for="(item, index2) in product_imgs[scope.$index]" :key="index2">
        <el-image
        style="max-height: 150px;max-width: 150px"
        :src="resolve(item)"
        >
            <template #error>
                <img :src="defaultImage">
            </template>
        </el-image>
    </el-carousel-item>
</el-carousel>

// data
product_imgs:[],
defaultImage:require('文件夹地址/nopic.jpg')

// function
resolve(item){
    try{
        return require('图片保存地址/'+item) // 带参数地址拼接
    }catch{
        console.log('产品'+item+'地址不存在')
    }
},