Bound image not displaying in Vue project

I have a component that displays an image:

<template>
    <div>
        <img :src="image" />
    </div>
</template>

<script>
export default {
  name: 'MyComponent',
  props: {
    image: String
  }
}
</script>

When I try to use this, and bind an image path:

<MyComponent
    image="./assets/image-test.png">
</MyComponent>

But it won't display the image.

What have I tried?

I tried replacing the code in the component to directly reference the image. If I do the following then the image does display:

<img src="@/assets/image-test.png" />

(Only with the @ symbol)

I've tried replacing the path that's bound to the component with:

image="@/assets/image-test.png">

But that makes no difference.

I found this answer, and so tried this:

<div>
    <img :src="getImage(image)" />
</div>

  methods: {
    getImage(path) {
      return require(path);
    }
  }

Inside the component. That results in an error at runtime:

Cannot find module './assets/image-test.png'

The full stack trace:

runtime-core.esm-bundler.js?5c40:217 Uncaught Error: Cannot find module './assets/image-test.png'
    at webpackEmptyContext (eval at ./src/components sync recursive (app.js:1080), <anonymous>:2:10)
    at Proxy.getImage (MyApp.vue?059c:17)
    at Proxy.render (MyApp.vue?059c:3)
    at renderComponentRoot (runtime-core.esm-bundler.js?5c40:710)
    at componentEffect (runtime-core.esm-bundler.js?5c40:4193)
    at reactiveEffect (reactivity.esm-bundler.js?a1e9:42)
    at effect (reactivity.esm-bundler.js?a1e9:17)
    at setupRenderEffect (runtime-core.esm-bundler.js?5c40:4176)
    at mountComponent (runtime-core.esm-bundler.js?5c40:4134)
    at processComponent (runtime-core.esm-bundler.js?5c40:4094)

I also tried that with the @ symbol.

Please could someone point me in the right direction on this. I realise that there's some quirk with Vue images (it says so on the linked post), but I'm at a loss as to how to persuade it to bind the image.

from Bound image not displaying in Vue project