I am trying to make a simple Vue application where I have a page that renders some images I have stored in my assets folder. The thing is I have a lot of images to import, so as opposed to just doing import imageName from './assets/images/image.png I wanted to use a .js file which I could then import straight into the script in my .vue file and then access any image I wanted straight from that import.

At the moment my files look like this:

showcase-images.js

export const cheat1 = require( "../assets/images/showcase/cheat1.png")
export const cheat2 = require( "../assets/images/showcase/cheat2.png")
export const cheat3 = require( "../assets/images/showcase/cheat3.png")
export const omdb1 = require( "../assets/images/showcase/omdb1.png")
export const omdb2 = require( "../assets/images/showcase/omdb2.png")
export const omdb3 = require( "../assets/images/showcase/omdb3.png")

I will then import this file into my vue file like this:

Showcase.vue

<script>
import * as showcaseImages from '../utilities/showcase-images.js'
</script>

<img :src="showcaseImages.omdb1">

My problem is I have learned that you cannot use require syntax on the frontend as I get the error: Uncaught ReferenceError: require is not defined so my question is am I able to accomplish this with my current approach or will I need to do something else?