VueJs dynamically loading src not working

Note: this entire answer uses require to solve the problem. I know of no workarounds that avoid explicit import utilities.

There are a couple of Vue/Webpack quirks at play here.

First, Webpack only knows how to convert a certain limited set of import path specifications into appropriate URLs in the final build. Using a data variable as the value of a :src prop is not a supported syntax: Webpack just sees that as a generic variable and will not transform it.

As mentioned in the question linked above, a first step to resolving the issue is using the require() syntax like so:

<img class="image" :src="imageSrc" alt="image">

export default {
  data () {
    return {
      imageSrc: require('@/assets/gallery/images/20211005_0044.jpg')
    }
  }
}

However, there is an additional quirk when the path in require needs to be dynamic. According to this answer, Webpack cannot import the file if its name is completely given as a variable. In other words, require(this.imageSrc) (where imageSrc is a string variable) will not work.

A workaround is to only include a subdirectory (or filename) in a variable, and use a static prefix in a string, like so:

<img class="image" :src="imageSrc" alt="image">

export default {
  data () {
    return {
      imageName: '20211005_0044.jpg'
    }
  },
  computed: {
    imageSrc () {
      return require(`@/assets/gallery/images/${this.imageName}`);
    }
  }
}