Vue3(TypeScript)预览模式下图片仅显示路径文本问题排查

你的问题核心是开发环境与生产预览环境的资源路径处理逻辑不一致：

问题根源 #

1. npm run dev时，Vite会直接解析项目内的本地文件路径，../src/...这种相对路径能找到源码里的图片；但npm run preview是基于打包后的dist目录运行，此时src目录不会被打包到最终产物里，硬编码的../src/路径自然失效，只会显示纯文本路径。
2. 改成./components/...后，浏览器会从当前页面URL的相对位置请求资源，但打包后组件相关的静态资源会被Vite重新整理到dist/assets目录（原components目录结构不会保留），所以会出现404错误。

两种可行的解决办法 #

方法一：使用public目录存放图片 #

1. 在项目根目录创建public/images/2023目录，将图片移入该目录；
2. 修改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: "/images/2023/Badge_Stand_(27_11_2023).png"
    },
]

public目录下的文件会被原封不动复制到dist根目录，绝对路径在开发和预览环境都能正常访问。

方法二：通过ES模块导入图片（推荐） #

Vite支持直接导入静态资源，会自动处理打包后的路径映射：

1. 在3dModellingFiles.ts中导入目标图片（路径相对于当前ts文件）：

import {ref} from 'vue';
import BadgeStandImg from './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: BadgeStandImg // 用导入的变量作为图片路径
    },
]

这种方式下，Vite会自动将图片处理为打包后的资源路径（例如/assets/Badge_Stand_xxxx.png），无论开发还是预览环境都能正确加载。

内容的提问来源于stack exchange，提问作者C.NCB