Haven't touched Vue in a while, now I'm building a <HeroImage> component in Vue and Vuetify which takes an src attributes, put the image, and combine it a certain way with the slot and other props.

Usually, the answer is wrapping the src string in a request(). But now it throws this message at compile time:

Critical dependency: the request of a dependency is an expression

Here's what I'm trying to do:

<!--
 src/views/Home.vue
-->
<template>
  <!-- This does not work -->
  <HeroImage src="@/assets/hero-image.png" />

  <!-- As comparison, this somehow works -->
  <img :src="require('@/assets/hero-image.png')" />
</template>

<script>
import HeroImage from "@/components/HeroImage"
export default {
  components: { HeroImage }
}
</script>

<!--
  src/components/HeroImage.vue
-->
<template>
  <img alt="Hero Image" class="align-center justify-center" :src="require(src)" />
</template>

<script>
export default {
  name: "HeroImage",
  props: {
    src: String
  }
}
</script>