So, basically i've searched the entire web(maybe not good enough?) for a Solution for the following Question/Situation.

At the Moment, I load an Image with the webpacks "require" function into my Template.

<div class="mt-5 mb-5 app-img">
              <img :src="img" alt="" >
          </div>
and

private img = require(`@/assets/patternImg/placeholder.webp`)

So actually now, i want to replace this Image in the same template.

First of all i know, that i can't use require anymore, since its static.

What I now got, is an array filled with URL-Strings which i want to use. I read some about lazy-loading images into websites, but im not quite sure, if lazyloading ist the solution since i must define constants.

The array comes out of a Database, where i store information which i can succesfully use on my template, but not the image-urls.

So how the array looks:

private imgURLs = ['`@/assets/patternImg/placeholder.webp`,`@/assets/patternImg/placeholder.webp`,...']

I can easily change the String inside the Array, i just need a concept/working solution for changing the image. The only requirement is, that the solution must function with the URLs. Other ideas will be may work too, but i got stuck in this situation with vue.

So it would be nice, if someone could help me.

Thx and Greets

ps. i use vuex/axios for Database-queries and buefy-css