Question

环境

我正在处理同一个 GitHub 存储库下的两个前端项目。按照 Vercel 提供的关于 monorepos 的指南，并以 Vercel 的 with-zone example 为例，我以与示例相同的方式构建了我的项目。

带区域/

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

--工具

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

问题

当 URL 与 platform.vercel.app/tools 不同时，图像不会加载（/tools 是第二个项目的 basePath。终端/浏览器中没有记录任何错误，所以我在这一点上卡住了。我只需查看窗口中的 alt 标签即可。

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

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

注意。

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

代码

工具/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}
/>

工具/package.json

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

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

Answer 1

我不知道这是否是解决此问题的最佳方法（可能不是），但包括 basePath（在本例中为 /tools） var firstTree = {'id': 1, 'name': 'name1', 'otherProperty': 'property1', 'children': [{'id': '1a', 'name': 'name1a', 'otherProperty': 'property1a', 'children': []}, {'id': '1b', 'name': 'name1b', 'otherProperty': 'property1b', 'children': [{'id': '1ba', 'name': 'name1ba', 'otherProperty': 'property1ba', 'children': []}, {'id': '1bb', 'name': 'name1bb', 'otherProperty': 'property1bb', 'children': []}]}]}; var secondTree = {'id': 1, 'name': 'name1', 'otherProperty': 'property1', 'children': [{'id': '1b', 'name': 'name1b', 'otherProperty': 'property1b', 'children': [{'id': '1ba', 'name': 'name1ba', 'otherProperty': 'property1ba', 'children': []}, {'id': '2ba', 'name': 'name2ba', 'otherProperty': 'property2ba', 'children': []}]}]}; var thirdTree = {'id': '3', 'name': 'name3', 'otherProperty': 'property3', 'children': [{'id': '3a', 'name': 'name3a', 'otherProperty': 'property3a', 'children': []}, {'id': '3b', 'name': 'name3b', 'otherProperty': 'property3b', 'children': []}]}; var entryArray = [firstTree, secondTree, thirdTree]; function merge_trees(trees){ var merger = {}; //find matches based on id for (var t of trees){ for (var i of t){ if (!(i['id'] in merger)){ merger[i['id']] = Object.fromEntries(Object.keys(i).map(x => [x, (new Set([i[x]]))])); } for (var k of Object.keys(i)){ merger[i['id']][k] = new Set([...(k in merger[i['id']] ? merger[i['id']][k] : []), i[k]]); } } } var new_result = []; //iterate over merges for (var i of Object.keys(merger)){ var result = {} for (var k of Object.keys(merger[i])){ //choose whether or not to merge again based on the size of the merged children if (k === 'children'){ result[k] = merger[i][k].size > 1 ? merge_trees(merger[i][k]) : [...merger[i][k]].filter(x => x.length > 1) } else{ result[k] = merger[i][k].size === 1 ? [...merger[i][k]][0] : [...merger[i][k]] } } new_result.push(result) } return new_result; } console.log(merge_trees(entryArray.map(x => [x]))) 的任何图像标签都可以解决问题。

src

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

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

环境

问题

注意。

代码

1 个答案: