前言:因本人有打造一个低代码平台,有时候开发是通过低代码平台开发,也就造成一个问题:有时候开发一个页面需要引入一些图片做背景之类的,而图片存在于本地代码的静态资源文件夹;直接通过路径是无法在低代码页面访问到对应图片(除非存储图片的文件夹不在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')
这是主要的代码,具体原理我也说不上来,是通过几次调试后发现的,如果有知道的还请告知。