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

Posted 2023-02-19

【中文标题】无法正确设置下一个配置故事书以从 url 获取图像

【英文标题】：Can't properly set up next-config storybook to get images from url

【发布时间】：2021-07-28 06:37:35

【问题描述】：

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

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

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

      <Image
       
       src="https://sourceexample.com/image.png"
       
       
     />

当我没有在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 文档中的“How do I setup Storybook to share Webpack configuration with Next.js?”下。

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 在返回方法中。它没有用。有人可以解释这里发生了什么以及我应该如何使用它吗？

【参考方案1】：

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

import * as nextImage from 'next/image';

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

【讨论】：

这只是绕过错误，但它没有正确使用Image标签，对吧？我尝试在配置中删除主机，但仍然有效

是的，这只是一种解决方法

【参考方案2】：

我遇到了这个问题，并通过在 storybook 的 webpack 配置中模拟 'next/image' 来解决它（请参阅下面的链接中的详细信息）

https://storybook.js.org/docs/react/workflows/build-pages-with-storybook#mocking-imports

新建一个 React 组件文件：

// file: .storybook/__mocks__/NextJSImageMock.js

import React from "react";

export default function NextImageMock(props) 
  return <img ...props />;

然后，覆盖导入：

// file: .storybook/webpack.config.js

module.exports = ( config ) => 
  config.resolve.alias = 
    "next/image": require.resolve("./__mocks__/NextJSImageMock.js"),
  ;

  return config;
;