标签: next-images

我在使用下一个图像组件时遇到问题，某些图像未在移动设备上显示，但在大屏幕上显示。如果我手动更改浏览器宽度，它们不会消失。

例如

<Image src="/images/header-image.svg" width="676px" height="463px" />

我尝试不使用宽度和高度并使用布局填充，但问题是相同的，并且如果布局是响应式的，则图像不会在所有屏幕尺寸上显示。

问题是我的public文件夹中有 10 张图像，我想在组件中使用它们。而不是写作

import imgurl1 from "../../public/celsius.gif";
import imgurl2 from "../../public/compass.gif";
import imgurl3 from "../../public/rain.gif";
.
.
.
import imgurl8 from "../../public/thermo.gif";
import imgurl9 from "../../public/sunset.gif";
import imgurl10 from "../../public/wind.gif";

上面的代码，我想使用一些更整洁和干净的代码？有没有办法不重复同一行并将其全部导入？

我假设类似的事情

import { imgurl1,imgurl2,...imgurl10, } from "../../public";

我有一个简单的 NextJs 应用程序。

当我在本地主机上运行应用程序时，一切似乎都工作正常 - 所有图像均按预期显示

当我使用此脚本时：下一个构建 && 下一个导出\n并浏览到我的本地构建时，我看不到图像，而是\xc2\xa0its\xc2\xa0"alt"\xc2\xa0text

我导入图像的方式：

import React from \'react\';\nimport Image from \'next/image\';\n\nimport someImage from \'../../../public/images/some-image.png\';\n\n\nconst Main = () => {\n    return (\n        <div>\n            <Image\n                src={someImage}\n                alt="Some Image"\n                placeholder="blur"\n            />\n        </div>\n}\n\n

next.config.js

/** @type {import(\'next\').NextConfig} */\nconst configuration = {\n    reactStrictMode: true,\n    eslint: {\n        dirs: [\'./src\'],\n        ignoreDuringBuilds: true,\n    },\n    images: {\n        loader: \'akamai\',\n        path: \'\',\n    },\n};\n\nmodule.exports = configuration;\n

我的代码设计：\n

环境: \n"next": "13.1.6",\n"react": "18.2.0",

此外，我尝试使用普通的 img 标签，但它导致了同样的问题。

如果这里有人遇到同样的问题，我将不胜感激任何帮助！ …

我看到能够使用除公共文件夹之外的其他目录的图像的替代方法是使用 Next-Images 库，但我按照文档中的描述正确执行了所有设置，我已经在互联网，但没有任何作用，我只能加载它 svgs。我在我的项目中使用打字稿。我注意到有关打字的一个细节，我们必须添加此参考：

/// <reference types="next-images" />

变得像这样：

/// <reference types="next-images" />

但是，对于 next-env.d.ts 文件，每次运行命令时，yarn dev添加的引用都会自动删除。

我的 next.config.js 文件：

/// <reference types="next" />
/// <reference types="next/types/global" />
/// <reference types="next/image-types/global" />
/// <reference types="next-images" />

我注意到的另一件事是：当项目编译时，通过浏览器控制台<img src="">，src中的标签是路径：

/_next/static/images/cora-c562c6fa203473521a5dc5b15a841192.jpg

由于我通过浏览器控制台手动输入了另一条路径，因此它可以工作：

/_next/static/image/src/assets/cora.e76cddfc04ca9d4b8a3868b2c40e3b7f.jpg

因此，如果有人知道我是否缺少任何可能没有完成的设置，或者可能有帮助的视频，或者文档中的详细信息，我将不胜感激。

下一版本：11.0.1 打字稿版本：4.3.5 下一图像版本：1.8.1

我创建了一个自定义图标并将其作为 SVG 导入到我的 next.js 应用程序中。我想实现一个功能，用户可以自定义该图标的颜色，例如红色到黄色或黑色等。但是这是静态图像，有什么办法可以实现这一点吗？