Images showing as just text in preview VUE 3 (typescript)

Issue

I'm working on a Portfolio site. I've come into an issue with my site. Everything works perfectly fine when I run it through npm run dev but once I do npm run preview some of the images do not work. These images are in the files called 3dModellingFiles.ts and then gets displayed in 3dModelling.vue.

As said, it works in the dev but not the preview. On the preview side it just shows as text: ../src/components/Software/3dModelling/Files/Images/2023/Badge_Stand_(27_11_2023).png

Vue.js

<script setup lan="ts">
...
import { twenty_three, twenty_twenty } from "@/components/Software/3dModelling/Files/3dModellingFiles"
...
</script>

<template>
...
<h2 id="year-2020" class="text-pf-red-300 text-3xl underline font-arial font-bold mt-10">2020</h2>
        <div v-for="twentyTwenty in twenty_twenty" :key="twentyTwenty.id.value" :id="'year-' + twentyTwenty.date.getFullYear()">
          <div class="bg-pf-red-950 bg-opacity-10 p-2 my-5 rounded hover:bg-opacity-30 flex">
            <div class="m-2 mr-5 flex-shrink-0">
              <img class="rounded"
                :src="twentyTwenty.image"
                :alt="twentyTwenty.image"
                style="width: 350px; object-fit: cover;">
            </div>
            <div class="flex flex-col">
              <div>
                <h1 class="text-white text-2xl font-arial font-bold mt-2">{{ twentyTwenty.title }}</h1>
                <h1 class="text-woodsmoke-300 text-md font-arial">{{ twentyTwenty.date.toLocaleDateString('en-GB') }}</h1>
              </div>
              <h1 class="text-white text-lg font-arial mt-4">{{ twentyTwenty.description }}</h1>
            </div>
          </div>
        </div>
...
</template>

3dModellingFiles.ts

import {ref} from 'vue';
export const twenty_three = [
    {
        id: ref(1),
        title: "Badge Stand",
        description: "Description Text",
        date: new Date("2023-11-27"),
        image: "../src/components/Software/3dModelling/Files/Images/2023/Badge_Stand_(27_11_2023).png"
    },
]

What am I doing wrong?

EXTRA NOTE - NOT MY QUESTION

I've tried some other changes on another page by doing it like ./components/ which gives me a get 404 error in the console log

DecafMechanics.png:1    
       GET http://localhost:4173/components/Software/Projects/Files/Images/2023/DecafMechanics.png

Solution

If you want dynamically use image like :src="image" form your static folder,the variable "image" need use import in vue3,or use require() in vue2

import {
  ref
} from 'vue';
import image from '@/src/components/Software/3dModelling/Files/Images/2023/Badge_Stand_(27_11_2023).png'
export const twenty_three = [{
      id: ref(1),
      title: "Badge Stand",
      description: "Description Text",
      date: new Date("2023-11-27"),
      image
    ]

Answered By - moon