Pass prop in img src in template

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.