Github 页面 vite JS 构建未显示图像

Question

我正在尝试使用 Github 页制作简单的作品集，但图像有问题。我无法加载它们。你能帮我解决这个问题吗？

这是我的构建文件夹。我使用了 Vite 和三个库 https://github.com/xakepa/Portfolio/tree/main/dist

Answer 1

我发现了问题。它在加载中。例如

const spaceTexture = new THREE.TextureLoader().load("./images/space.jpg");

问题出在我试过的补丁中("./images/space.jpg");或 ("/images/space.jpg");但这些仅在本地有效，在 github 页中无效。

正确的方法是没有任何破折号或点和

("images/space.jpg");

Answer 2

我有同样的问题，我通过在 root 中添加 public folder 中的图像而不是 src folder 来解决它，就像这样 public/assets/img

并且 img src 将是这样的 <img src="/assets/img/downlaod.png" />

 ─┬root
  |
  ├─public/assets/img
  ├─src
  ├─.gitignore
  ├─vite.config.js
  ├─README.md
  ├─dist
  ├─.yarn

Github pages vite JS build not showing the images