Next.js/Storybook 远程图像不工作

Question

在 Storybook 中查看使用 Next Image 的组件时出现以下错误：

Invalid src prop (https://picsum.photos/720/775) on `next/image`, hostname "picsum.photos" is not configured under images in your `next.config.js

这是我的 next.config.js 的样子：

module.exports = {
  images: {
    domains: [process.env.NEXT_IMAGE_DOMAIN, "picsum.photos"],
  },
};

是的，我安装了 https://storybook.js.org/addons/storybook-addon-next。

这是我的故事书 main.js 的样子：

const path = require("path");

module.exports = {
  stories: [
    "../stories/**/*.stories.mdx",
    "../stories/**/*.stories.@(js|jsx|ts|tsx)",
    "../components/**/*.stories.mdx",
    "../components/**/*.stories.@(js|jsx|ts|tsx)",
  ],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
    {
      name: "storybook-addon-next",
      options: {
        nextConfigPath: path.resolve(__dirname, "../next.config.js"),
      },
    },
  ],
  framework: "@storybook/react",
  core: {
    builder: "webpack5",
  },
  staticDirs: ["../public"],
};

Building Next 工作正常，但是当运行 Storybook 时，出现该错误。它似乎没有读取 next.config.js 文件？

Answer 1

storybook 和下一个 12.1.5 有问题，降级到 12.1.4 之后应该可以正常工作。

https://github.com/RyanClementsHax/storybook-addon-next/issues/72

Next.js/Storybook 远程图像不工作

Next.js/Storybook remote images not working

next.js

storybook

nextjs-image

nextjs-storybook