React+Vite项目npm run preview图片无法加载问题求助

用React.js（基于Vite）开发项目时，npm run dev本地预览图片正常，但执行npm run preview预览构建后的dist文件时，图片无法加载。已将图片放入public文件夹，调整过图片路径，且dist文件夹的assets目录里确实包含这些图片。

项目结构：

图片路径配置（data/portfolio.js）：

export default [
  {
    title: "Flaco Ramirez Boxing Website",
    imgUrl: "/assets/frb.png",
    stack: ["Typescript", "React", "Tailwind", "Vite"],
    link: "",
  },
  {
    title: "Portfolio Website ",
    imgUrl: "/assets/portfolio.jpeg",
    stack: ["Javascript", "React", "Tailwind", "Vite"],
    link: "",
  },
  {
    title: "Discord Bot ",
    imgUrl: "/assets/discord.png",
    stack: ["Python", "Discord.py"],
    link: "",
  },
];

PortfolioItem.jsx代码：

import React from 'react';

export function PortfolioItem({ title, imgUrl, stack, link }) {
   return (
      <a 
         href={link}
         target="_blank"
         rel="noopener noreferrer"
         className="border-2 border-stone-900 dark:border-white rounded-md overflow-hidden"
      >
         <img
            src={imgUrl}
            alt="portfolio" 
            className="w-full h-36 md:h-48 object-cover cursor-pointer"
         />
         <div className="w-full p-4">
            <h3 className="text-lg md:text-xl dark:text-white mb-2 md:mb-3 font-semibold ">{title}</h3>
            <p className="flex flex-wrap gap-2 flex-row items-center justify-start text-xs md:text-sm dark:text-white ">
               {stack.map(item => (
                  <span className="inline-block px-2 py-1 font-semibold border-2 border-stone-900 dark:border-white rounded-md">
                     {item}
                  </span>
               ))}
            </p>
         </div>
      </a>
   )
}

export default PortfolioItem;

Portfolio.jsx代码：

import React from "react";
import porfolio from "../data/porfolio";
import PortfolioItem from "./PortfolioItem";

export function Portfolio() {
  return (
    <div className="flex flex-col md:flex-row items-center justify-center">
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        {porfolio.map((project) => (
          <PortfolioItem
            imgUrl={project.imgUrl}
            title={project.title}
            stack={project.stack}
            link={project.link}
          />
        ))}
      </div>
    </div>
  );
}

export default Portfolio;

这是Vite静态资源路径的常见问题，核心是构建后资源路径与本地开发时的路径规则差异，可按以下步骤排查修复：

1. 修正资源路径规则
   Vite中public文件夹下的资源会被直接复制到dist根目录，所以如果你的图片放在public/assets里，dist根目录下应该有对应的assets文件夹。此时可以：

   • 要么确保路径正确，保持/assets/xxx.png的格式，同时检查dist根目录下是否存在该文件夹及图片；
   • 要么改用import方式引入图片，避免路径问题：

     // 在data文件中导入图片
     import frbImg from '../public/assets/frb.png';
     import portfolioImg from '../public/assets/portfolio.jpeg';
     import discordImg from '../public/assets/discord.png';
     
     export default [
       {
         title: "Flaco Ramirez Boxing Website",
         imgUrl: frbImg,
         stack: ["Typescript", "React", "Tailwind", "Vite"],
         link: "",
       },
       // ...其他项目配置
     ];
     

2. 检查Vite配置文件
   打开vite.config.js，确保base配置与部署/预览路径匹配：

   import { defineConfig } from 'vite';
   import react from '@vitejs/plugin-react';
   
   export default defineConfig({
     plugins: [react()],
     base: '/', // 部署在域名根目录用此值，若部署在子路径则改为对应路径，比如 '/portfolio/'
     build: {
       assetsDir: 'assets', // 确保构建后资源存放在assets目录
     }
   });
   

3. 验证dist文件夹结构
   打开dist目录，确认assets文件夹存在且包含目标图片。如果缺失，手动复制public/assets下的文件到dist/assets，或重新执行npm run build确保资源被正确复制。

4. 临时测试相对路径
   如果上述方法无效，可临时将路径改为相对格式（比如./assets/frb.png）测试，但这种方式在路由切换时可能出现问题，仅作为排查手段，不推荐长期使用。

内容的提问来源于stack exchange，提问作者Donsickle