我在一个投资组合网站上工作。我的网站遇到了一个问题。当我通过npm run dev运行它时，一切都很好，但是一旦我运行npm run preview，一些图像就不工作了。这些图像在名为3dModellingFiles.ts的文件中，然后显示在3dModelling.vue中。
如前所述，它可以在开发中工作，但不能在预览中工作。在预览端，它只显示为文本：../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"
    },
]

型
我做错了什么？

• 额外说明-不是我的问题 *

我在另一个页面上尝试了一些其他的更改，比如./components/，这在控制台日志中给了我一个get 404错误

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

型