下一个 js 从嵌套目录导入公用文件夹图像答案

【问题标题】：Next js importing public folder image from nested directory下一个 js 从嵌套目录导入公用文件夹图像
【发布时间】：2021-08-08 09:25:46
【问题描述】：

我已经将我的图像存储在公共目录中，我的所有代码都在 src 文件夹中。

通常当我尝试使用从src/page/page.js 导入图像时喜欢：/image/logo/logo-dark.png 它可以工作，但是当我从src/component/core/BrandLogo 目录导入图像时，它给了我：

找不到模块：无法解析“/image/logo/logo-dark.png”

我的next.config.js 是：

const path = require('path')
const withImages = require('next-images')
module.exports = {
  sassOptions: {
    includePaths: [path.join(__dirname, 'src/assets/scss')],
    eslint: {
      // Warning: Dangerously allow production builds to successfully complete even if
      // your project has ESLint errors.
      ignoreDuringBuilds: true,
    },
  },
  images: {
    loader: "imgix",
    path: "",
  }
}
module.exports = withImages({
  fileExtensions: ["jpg", "jpeg", "png", "gif"],
  webpack(config, options) {
    return config
  }
})

组件代码：

import darklogo from '/public/image/logo/logo-dark.png'
import lightLogo from '/image/logo/logo-white.png'
export default function BrandLogo({logoWhite=false,...rest}){
return(
<>
    <img src={darklogo} alt="brand logo" {...rest}/>
</>
)
}```

【问题讨论】：

请同时在您要导入图像的位置添加（组件）代码。
尝试使用相对路径。喜欢：import logo from '../public/image/logo.png' 如果你有更多的嵌套结构，就到根目录。或者设置一个根路径，这样导航就不会冲突了。
组件代码更新
这是否回答了您的问题：PNG images cannot be loaded | NextJS？只需直接在<img> 的src 属性中通过public 文件夹中的路径引用每个图像 - 无需导入它们。
实际上我并没有尝试从 3 级嵌套路径导入图像。

标签： javascript reactjs next.js

【解决方案1】：

您不能使用绝对路径来导入图像。导入图片时需要使用相对路径。喜欢 - ../public/文件夹。绝对路径只能直接与 src 一起使用。因为，公共内部的文件然后可以被您的代码从基本 URL (/) 开始引用。

【讨论】：

【解决方案2】：

我通过编辑jsconfig.json 文件解决了我的问题。如下所示：

{
   "compilerOptions": {
    "module": "commonjs",
    "declaration": true,
    "removeComments": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "allowSyntheticDefaultImports": true,
    "target": "es2017",
    "sourceMap": true,
    // "outDir": "./dist",
    "baseUrl": ".",
    "resolveJsonModule": true,
    "moduleResolution": "node",
    "paths": {
        "~components/*": ["src/components/*"],
        "~components": ["src/components"],
        "~fonts/*": ["public/fonts/*"],
        "~fonts": ["public/fonts"],
        "~image/*": ["public/image/*"],
        "~image": ["public/image"],
        "~sections": ["src/sections"],
        "~sections/*": ["src/sections/*"],
        "~styled/*": ["src/styles/*"],
        "~styled": ["src/styles"],
        "~scss/*": ["src/styles/scss/*"],
        "~scss": ["src/styles/scss"],
        "~data/*": ["src/data/*"],
        "~data": ["src/data"],
        "@/*": ["node_modules/*"],
        "@": ["node_modules"],
    }
}

我的组件现在看起来像这样：

import darklogo from '~image/logo/logo-dark.png'
export default function BrandLogo({logoWhite=false,...rest}){
  return(
    <>
      <img src={darklogo} alt="brand logo" {...rest}/>
    </>
  )
}

【讨论】：