How to import images dynamically using Webpack in Electron JS (Vue JS) - vue.js

Question

I tried a lot of ways to import pngs dynamically but it keeps saying..
Uncaught (in promise) Error: Cannot find module './SGSkysTheLimit.png'
at webpackContextResolve (eval at ./src/renderer/assets/img/square sync recursive ^\.\/.*\.png$ (renderer.js:5418), <anonymous>:374:11)
at webpackContext (eval at ./src/renderer/assets/img/square sync recursive ^\.\/.*\.png$ (renderer.js:5418), <anonymous>:369:11)
at VueComponent._callee2$ (TestComponent.vue?87f2:114)
at tryCatch (runtime.js?96cf:62)
at Generator.invoke [as _invoke] (runtime.js?96cf:296)
at Generator.prototype.<computed> [as next] (runtime.js?96cf:114)
at step (asyncToGenerator.js?0f75:17)
at eval (asyncToGenerator.js?0f75:35)
at new Promise (<anonymous>)
at new F (_export.js?63b6:36)
I tried solutions like these
Example 1:
<img :src="fileName(game.key_name)">
Example 2:
<img :src="require(`../assets/img/square/${game.key_name}.png`)">
async fileName(filename) {
// Not working
const image = await require(`../assets/img/square/${filename}.png`)
return image
// Not working
return import(`../assets/img/square/${filename}.png`)
// Not working
let image = `../assets/img/square/${filename}.png`
return require(image)
// Not working
return require(`../assets/img/square/${image}`)
// Not working
var images = require.context('../assets/img/square/', false, /\.png$/)
return images('./' + filename + ".png")
// Working
return require("../assets/img/square/SGJellyfishFlow.png")
// but the problem is I need image is dynamically imported
}
App\src\renderer\assets\img\square\SGSkysTheLimit.png
I tried a lot of search on stackoverflow and github but all of them not fix my problem.