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

Question

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

https://xakepa.github.io/Portfolio/

这是我的构建文件夹。我使用了 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

public folder我遇到了同样的问题，我通过在里面添加图像而root不是在 中解决了这个问题src folder，就像这样public/assets/img

\n

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

\n

 \xe2\x94\x80\xe2\x94\xacroot\n  |\n  \xe2\x94\x9c\xe2\x94\x80public/assets/img\n  \xe2\x94\x9c\xe2\x94\x80src\n  \xe2\x94\x9c\xe2\x94\x80.gitignore\n  \xe2\x94\x9c\xe2\x94\x80vite.config.js\n  \xe2\x94\x9c\xe2\x94\x80README.md\n  \xe2\x94\x9c\xe2\x94\x80dist\n  \xe2\x94\x9c\xe2\x94\x80.yarn\n

\n