Vite项目图片在Localhost正常显示，Netlify部署后无法加载

云原生阿岚

2026-7-12

Vite项目部署Netlify后图片无法加载的解决方案

问题根源

你的图片路径写法不符合Vite的静态资源处理规则，导致本地开发时路径有效，但打包部署后路径失效。Vite对public和src目录下的资源有不同的引用要求：

public目录下的资源会被直接复制到打包后的dist根目录，必须用根路径引用
src目录下的资源会被Vite处理（比如哈希命名），需要通过import导入或new URL()方式获取正确路径

具体修复步骤

方案1：使用public目录存放图片

将所有图片放到项目根目录的public文件夹中
修改数组中的图片路径为根路径格式（去掉../public、src/前缀）：

const [array, setArray] = useState([
  {
    text: 'Check 123',
    name: 'Lahmacun',
    image: '/lahmacun.jpeg',
    id: self.crypto.randomUUID(),
    liked: false,
  },
  {
    text: 'Check 456',
    name: 'Chicken',
    image: '/chicken.webp',
    id: self.crypto.randomUUID(),
    liked: false,
  },
  // 其他图片项同理修改路径
]);

方案2：使用src/assets目录存放图片

在src下创建assets/images文件夹，将图片放入其中
通过import导入图片后使用：

// 先导入所需图片
import lahmacunImg from './assets/images/lahmacun.jpeg';
import chickenImg from './assets/images/chicken.webp';

// 在数组中直接使用导入的变量
const [array, setArray] = useState([
  {
    text: 'Check 123',
    name: 'Lahmacun',
    image: lahmacunImg,
    id: self.crypto.randomUUID(),
    liked: false,
  },
  {
    text: 'Check 456',
    name: 'Chicken',
    image: chickenImg,
    id: self.crypto.randomUUID(),
    liked: false,
  },
  // 其他图片项同理修改
]);