在 `next/image` 中出现无效的 `src` 属性（'这里是一个链接'），主机名“localhost”未在您的 `next.config.js` 中配置为图像。

Question

我正在使用 Next.js 的 Image 组件（它是 Next.js 的新功能）。我尝试提供源 URL：

{`${API}/user/photo/${blog.postedBy.username}`}

但是它给我显示了这个错误。我也在我的next.config.js文件中进行了更改。

Translated text:

But it showed me this error. I also made changes in my next.config.js file.

module.exports = {
    images: {
      domains: ['localhost'],
    },
  }

但是对我都没有用。如果您了解这方面的任何信息，请帮忙解决。

- TASKMASTER

---

什么是“API”？它是本地主机吗？ - Dragos Strugar

是的，它是本地主机。 - TASKMASTER

在我的情况下，重新启动服务器解决了问题。 - user10429621

基本形式只需要loader属性。 - Clode Morales Pampanga III

Answer 1

const src = `${API}/user/photo/${blog.postedBy.username}`;
    
<Image loader={() => src} src={src} width={500} height={500}/>

这里的loader是一个生成图像URL的函数。它将根域名附加到您提供的src上，并生成多个URL以在不同大小请求图像。这些多个URL用于自动生成 srcset，以便您网站的访问者可以得到适合其视口大小的图像。

- Sean Amarasinghe

Answer 2

编辑 next.config.js ：

module.exports = {
  reactStrictMode: true,
  images: {
    domains: ['example.com'],
  },
}

- Safaetul Ahasan Piyas

Answer 3

是的，我终于得到了答案。制作一个加载器函数，从图像的目标位置加载它。

const myLoader=({src})=>{
  return `${API}/user/photo/${blog.postedBy.username}`;
}

将此加载器函数用于 Image 标签的 loader 属性中。

<Image loader={myLoader} src={`${API}/user/photo/${blog.postedBy.username}`} width={500}
    height={500}/>

这对我完美地起作用。

- TASKMASTER

---

那很好！我们还可以使用src参数，使其更加灵活：const myLoader=({src})=>\${API}${src}`` - Guilherme Lemmi

Answer 4

这里有很多过时的答案建议在next.config.js中设置domains键。从Next 12.3.0开始，这不再正确; 请参见：https://nextjs.org/docs/messages/next-image-unconfigured-host

相反，应该使用一个remotePatterns属性，它比旧的domains更复杂:

module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'example.com',
        port: '',
        pathname: '/account123/**',
      },
    ],
  },
}

- machineghost

---

不得不重新运行以解决错误。 yarn run dev - Dylan w

Answer 5

我经历了同样的问题，你需要重新启动开发服务器，每次在next.config.js文件上做更改之后都需要这样做。

API字符串应该包含端口号。例如：localhost:3001

- edgarlr

Answer 6

在域数组中添加'localhost'将解决该问题，

不幸的是，配置文件(next.config.js)更改后，nextJS没有自动刷新服务器。

您必须手动重启服务器才能反映更改。

您还可以尝试通过设置reactStrictMode: true,来实现。

这是完整的导出对象。

module.exports = {
    reactStrictMode: true,
    images: {
        domains: [
            "localhost",
            process.env.WORDPRESS_API_URL.match(/(http(?:s)?:\/\/)(.*)/)[2], // Valid WP Image domain.
            "2.gravatar.com",
            "0.gravatar.com",
            "secure.gravatar.com",
        ],
    },
};

- coder618

Answer 7

在next.config.js文件中。

添加图片src域名:

const nextConfig = {
  reactStrictMode: true,
  images : {
    domains : ['sangw.in', 'localhost', 'picsum.photos'] // <== Domain name
  }
}

module.exports = nextConfig

- Sangwin Gawande

Answer 8

我曾经遇到过同样的问题，而我的域名是正确的。删除.next和node_modules文件夹并运行yarn/npm install解决了这个问题。

- Kadir Zukorlic

Answer 9

对我来说，在 next.config.js 文件中，

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  images: {
    domains: [ "abc.def.org", ]
  },
}

module.exports = nextConfig

然后在我的图像标签中

<Image
  unoptimized // for image caching, else error
  src={profile.picture}
  alt={profile.picture || "IMG"}
  width={60}
  height={60}
/>

- Kedar K

Answer 10

对于 Next.js 13，只需将以下内容添加到 next.config 文件中即可：

const nextConfig = {
    experimental: {
        appDir: true,
    },
    swcMinify: true,
    optimizeFonts: true,
    images: {
        remotePatterns: [
            {
                protocol: "https",
                hostname: "websitename.com",
            },
        ],
        minimumCacheTTL: 15000000,
    },
};

这将有望解决问题。

- idillio