1、主进程main.js
import { app, protocol } from 'electron'
import { normalize } from 'path'
app.whenReady().then(() => {
// 注册自定义读取本地文件协议
protocol.registerFileProtocol('duo', (request, callback) => {
const url = request.url.replace(/^duo:///, '') // 去除自定义协议前缀
callback(decodeURI(normalize(url)))
})
})
2、主入口页面index.html(修改meta)
关键代码:img-src 'self' duo:,duo是上面protocol.registerFileProtocol定义的第一个入参
<meta
http-equiv="Content-Security-Policy"
content="default-src 'self'; script-src 'self'; img-src 'self' duo:; style-src 'self' 'unsafe-inline'"
/>
3、组件src使用
<el-avatar :size="66" :src="avatar" />
avatar.value = 'duo:///' + path