时间戳

首页 > 解决方案 > Monorepos，图像未在不同的基本路径中加载

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

问题描述

环境

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

带区/

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

- 工具

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

问题

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

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

笔记。

我在主要项目平台上没有这个问题。我正在使用.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",
..

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

标签： reactjsnext.jsvercel

解决方案

我不知道这是否是解决此问题的最佳方法（可能不是），但在任何图像标记中包含basePath（在本例中为/tools ）可以解决问题。src

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

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

推荐阅读