Monorepos，图像未加载到不同的基本路径

Question

环境

我在同一个 GitHub 存储库下处理两个前端项目。按照 Vercel 提供的关于 monorepos and taking as an example Vercel's with-zone example 的指南，我按照示例中的相同方式构建了我的项目。

带区域/

--platform //这是主要项目（在 Vercel 的指南中称为主页）

--工具

两个部署都工作正常，这意味着我可以访问 platform.vercel.com 和 platform.vercel.com/tools（这些 URL 只是示例）

问题

当 URL 与 platform.vercel 不同时，图像未加载。app/tools（/tools 是第二个项目的 basePath。[=65 中未记录任何错误=] 所以我被困在这一点上。我只看到 window.

中的 alt 标签

简而言之，对于以下网址：

platform.vercel.app/tools -> 图片加载成功
platform.vercel.app/tools/page1 -> 图片未加载

注意。

我的主要项目平台没有这个问题。我正在使用 .jpg 图片

代码

tools/next.config.js

module.exports = {
  basePath: '/tools', 
    webpack: (config, options) => {
      config.module.rules.push({
          test: /\.csv$/,
          loader: 'csv-loader',
          options: {
            dynamicTyping: true,
            header: true,
            skipEmptyLines: true,
          }
        })
  
      return config
    },

  }

任意页面的 Img 标签

<img 
    src='categories/fluids.svg' // categories is in public folder
    className={sizes.imgSmall}
/>

tools/package.json

{
...
  "dependencies": {
    "next": "10.1.3",
    "react": "17.0.2",
..

提前感谢您的时间和回答！

Answer 1

我不知道这是否是解决此问题的最佳方法（可能不是），但包括 basePath ( /tools 在这种情况下）在任何图像标签的 src 中解决问题。

<img 
    src='/tools/categories/fluids.svg'
    className={sizes.imgSmall}
    alt='Fluid mechanics icono' />

它适用于工具项目页面文件夹中的任何页面。

Monorepos，图像未加载到不同的基本路径

Monorepos, images are not being loaded at differnt base path

reactjs

next.js

vercel

环境

问题

注意。

代码