无法正确设置下一个配置故事书以从 url 获取图像

Question

我正在尝试从故事书中的网址导入图像。在 nextJS 中，图像不能来自域，除非您允许。我允许它在next-config.js文件中执行以下操作：

module.exports = {
  env: {
    API: process.env.API
  },
  images: {
    domains: ['https://sourceexample.com/image']
  }
};

它适用于在故事书之外制作页面时，使用常规next dev. 但是，当我尝试渲染具有此组件的同一页面时：

      <Image
       alt="example"
       src="https://sourceexample.com/image.png"
       width="auto"
       height="auto"
     />

当我没有在 中添加允许的域时，它显示完全相同的错误next-config.js，即： Invalid src prop (https://sourceexample.com/image.png) on `next/image`, hostname "source" is not configured under images in your `next.config.js

我想也许是因为我应该导入next-config.js故事书配置，所以我用谷歌搜索它并偶然发现了这段代码，我不知道如何处理它。此代码写在“如何设置 Storybook 以与 Next.js 共享 Webpack 配置？”下 在故事书文档中。

module.exports = {
  webpackFinal: async (baseConfig) => {
    const nextConfig = require('/path/to/next.config.js');

    // merge whatever from nextConfig into the webpack config storybook will use
    return { ...baseConfig };
  },

我尝试扩展属性，例如nextConfig添加 return {...baseConfig, ...nextConfig}返回方法。它不起作用。有人可以解释一下这里发生了什么以及我应该如何使用它？

Answer 1

只需将此代码添加到.storybook/preview.js文件中即可：

import * as nextImage from 'next/image';

Object.defineProperty(nextImage, 'default', {
  configurable: true,
  value: props => <img {...props} />
});

更新：似乎这个插件解决了这个问题 - https://storybook.js.org/addons/storybook-addon-next