Pass prop in img src in template - node.js

Question

In my component, I am trying to pass a dynamic string prop to the image src
<template>
<div class="flex flex-column col-12 md:col-6 xl:col-4 surface-card p-4 border-round border-bg text-left">
<h2>{{ title }}</h2>
<a :href="url">
<img :src="require(`../assets/images/${image}.png`)" class="portfolio-img" alt="" />
</a>
<div class="font-medium text-500 mb-3">
<p>{{ text }}</p>
</div>
<a class="p-button p-component p-button-raised p-ripple external-link" :href="url" target="_blank">Visit</a>
</div>
</template>
And in my View I am trying to create a for loop to display all of the properties. The data is coming from a very simple json file.
<Card v-for="item in portfolioData.portfolio"
:title="item.title"
:image="item.img"
:url="item.url"
:text="item.text">
</Card>
{
"portfolio":
[
{
"title": "test",
"url": "test",
"img": "AICN-Group",
"text": "test test test"
}
]
}
I get issues with Webpack when trying to do this
error: Cannot find module './undefined.png'
at webpackContextResolve (eval at ./src/assets/images sync recursive ^\.\/.*\.png$
I don't understand this at all so could do with some help understanding it as well as a solution if possible. I've tried other solutions on SO but they don't seem to work.
Thanks.