How do I read and display my image from a json file using Vue3?

Question

I am using JSON-server for my data and want to display it in my Vue3 template. At the moment, I am able to display all of the data from the JSON file except for the images, which I know I have to read differently. I found this previously posted question How to make Vue display an image from a local path from json file and I was trying to use it to figure out my question. This what I have so far. The SingleOrder.vue component.

<template>
  <div class="post">
    <img src="{{order.image}}" alt="" />
    <h3>
      {{ order.title }} <span>{{ order.price }}</span>
    </h3>
  </div>
</template>

<script>
export default {
  // our prop from the PostList component
  props: ["order"],
  setup() {},
};
</script>

<style></style>   

And the db.json file.

{
  "orders": [
    {
      "id": 1,

      "image": "require('..assets/coffeeIcon.png')",
      "title": "Americano",
      "price": 2000
    },
    {
      "id": 2,
      "image": "./src/assets/coffeeIcon.png",
      "title": "Iced Americano",
      "price": 2000
    },
    {
      "id": 3,
      "image": "../src/assets/coffeeIcon.png",
      "title": "Latte",
      "price": 2500
    },
    {
      "id": 4,
      "image": "../src/assets/coffeeIcon.png",
      "title": "Decaf",
      "price": 3000
    },
    {
      "id": 5,
      "image": "../src/assets/coffeeIcon.png",
      "title": "Tea",
      "price": 1500
    }
  ]
}

I tried fooling around with the paths for the images, hoping there was a mistake in the json file rather than the template. Any help would be gratefully appreciated.