图像未显示在 cloudflare 页面上

Question

我使用 vite 和 Node 创建了一个 THREE.js 应用程序。然而，当我在开发环境中时，一切都运行良好，但是当我使用以下命令将其部署到 Cloudflare 页面时：

vite build 

作为我的构建命令。纹理（图像）未显示，但着色器显示。我正在将其从 github 部署到 cloudflare。

我在浏览器控制台中没有收到任何错误，在构建日志中也没有收到任何错误。这是我的文件夹结构

-images
-shaders
main.js
package-lock.json
package.json
style.css
vite.config.css

我的 Vite 配置文件如下所示：

import vitePluginString from 'vite-plugin-string'

export default {
    plugins: [
        vitePluginString()
    ],
    build: {
        chunkSizeWarningLimit: 2048 // 2kb
    }
}

构建选项是为了防止我收到有关块大小的警告，但如果我将其取出，也没有什么区别，我认为这可能是问题所在。非常感谢任何帮助，谢谢！

这是我用来导入资产的代码。

function createMoon(radius, orbit, speed){
  const moon = new THREE.Mesh(new THREE.SphereGeometry(radius, 10, 16), new THREE.ShaderMaterial({
    vertexShader: moonVertexShader,
    fragmentShader: moonFragmentShader,
    uniforms: {
      moonTexture: {
        value: new THREE.TextureLoader().load('./images/moon.jpg')
      }
    },
  }));

此代码在本地开发服务器上运行良好。

Answer 1

我将图像文件夹放在另一个名为 public 的文件夹中，并删除了代码中加载图像的 ./ 。

Answer 2

要以 @Ecburt 的答案为基础，如果您在使用 cloudflare 页面时没有看到静态资产，请将包含资产的文件夹重命名为

public

并更新所有现有文件路径以指向此新文件夹。

旧项目结构：

project
 - assets
   - foo.png
 - src
 - index.html
...

---
<img src="./assets/foo.png" alt="foo">

新项目结构：

project
 - public
   - foo.png
 - src
 - index.html
...

---
<img src="./public/foo.png" alt="foo">

如果您使用

Vite

，则无需在路径名中使用

public

：

<img src="/foo.png" alt="foo">