Asset URL Handling for dynamic url's

When I generate a series of images with a static path, all is fine:

<img v-for="i in 4" :key = "i" :src="`/img/${i}.png`">

…and this also works:

<img src="@/assets/img/1.png">
<img src="@/assets/img/2.png">

But it fails when I like to have some module request to our asset folder:

<img v-for="i in 4" :key = "i" :src="`@/assets/img/${i}.png`">

Could a dynamic src property work so webpack knows what to do??

To answer my own question, I think I found a not so bad way, by creating a Mixin:

const IMAGES = require.context('@/assets/', true, /\.(?:jpg|gif|png|svg|webm|mp4|vtt|)$/)

  methods: {
    assetUrl (url) {
      return IMAGES('./' + url)

And now I can use in any component:

  <img :src="assetUrl('img/1.jpg')">