关于vue项目中一种比较特别的本地图片的引入办法

前言：因本人有打造一个低代码平台，有时候开发是通过低代码平台开发，也就造成一个问题：有时候开发一个页面需要引入一些图片做背景之类的，而图片存在于本地代码的静态资源文件夹；直接通过路径是无法在低代码页面访问到对应图片（除非存储图片的文件夹不在webpack编译打包范围），几番思寻下，终于找到一个可以在外面访问本地静态资源的办法

1.创建一份js文件，用于收集需要用到的图片资源，我这边是以uploadImg.js命名

// uploadImg.js

import img1 from '@/../static/xxx/images/img1.png'
import img2 from '@/../static/xxx/images/img2.png'
import img3 from '@/../static/xxx/images/img3.png'
import img4 from '@/../static/xxx/images/img4.png'

export {
    img1,
    img2,
    img3,
    img4
}

2.在低代码的本地代码中，定义一个方法供低代码开发时调用

// 假设该文件名为onlineCode.vue，
// 本人设置onlineCode.vue与unloadImg.js在同一文件夹下

前后代码省略，只展示定义的方法

getImage: function(key) {
   // 由于本人设置onlineCode.vue与unloadImg.js在同一文件夹下，所以此处引入直接是./uploadImg
   const images =  require('./uploadImg');
   return images[key]
},

3.定义了该方法在低代码可以调用，所以只需要低代码开发时，通过一下方法即可实现引入本地图片，即使本地代码经过编译打包也依旧可以正常访问到

// 低代码平台的代码段

let origin = window.location.origin
// 此处变量的img1就是本地资源图片
let img1 = origin + this.getImage('img1')

这是主要的代码，具体原理我也说不上来，是通过几次调试后发现的，如果有知道的还请告知。