Nrwl Storybook React 不渲染图像

Posted 2023-03-23

【中文标题】Nrwl Storybook React 不渲染图像

【英文标题】：Nrwl Storybook React Not Rending Images

【发布时间】：2020-09-28 08:20:24

【问题描述】：

我有一个使用 Nrwl 构建的 react 项目。我刚刚注意到我的组件中的所有图像都没有加载。我研究了一下尝试了不同的技术，但无法修复它。例如，我有这些文件

libs/src/lib/components/Nav/Nav.tsx

import React,  FC, MouseEvent  from "react";
import NavStyled from "./Nav.style";

export const Nav: FC<NavProps> = ( click : NavProps) => 
  return (
    <NavStyled>
      <div className="nav__container">
        <a className="logo" href="/">
          <img src="../../assets/icons/logo.svg"/>
        </a>
      </div>
    </NavStyled>
  );
;

export default Nav;

libs/src/lib/components/Nav/Nav.stories.tsx

import React from "react";
import Nav from "./Nav";

export default 
  component: Nav,
  title: "Components/Nav"
;

export const defaultStory = () => <Nav />;

libs/storybook/.storybook/webpack/config.js

const rootWebpackConfig = require("../../../.storybook/webpack.config");
// Export a function. Accept the base config as the only param.
module.exports = async ( config, mode ) => 
  config = await rootWebpackConfig( config, mode );

  config.resolve.extensions.push(".tsx");
  config.resolve.extensions.push(".ts");
  config.module.rules.push(
    test: /\.(ts|tsx)$/,
    loader: require.resolve("babel-loader"),
    options: 
      presets: [
        "@babel/preset-env",
        "@babel/preset-react",
        "@babel/preset-typescript"
      ]
    
  );
  return config;
;

.storybook/webpack.config.js

module.exports = async ( config, mode ) => 
  config.module.rules.push(
    test: /\.stories\.tsx?$/,
    loaders: [
      
        loader: require.resolve("@storybook/source-loader"),
        options:  parser: "typescript" 
      
    ],
    enforce: "pre"
  );
  return config;
;

我使用

运行故事书

nx run storybook:storybok

【问题讨论】：

您是否使用原始 webpack 中的任何加载器来加载图像？

我不这么认为。但是在最高根级别还有另一个 webpack 文件。我刚刚编辑了答案。

是的，这就是我想知道的，您是否在您的***根级 webpack 文件中使用任何图像加载器？

我不这么认为。我保留了默认配置

【参考方案1】：

我认为你没有使用任何图像加载器，你可以通过将它添加到你的 webpack 配置文件来尝试加载它。

    const svgToMiniDataURI = require('mini-svg-data-uri');
        const rootWebpackConfig = require("../../../.storybook/webpack.config");
// Export a function. Accept the base config as the only param.
module.exports = async ( config, mode ) => 
  config = await rootWebpackConfig( config, mode );

  config.resolve.extensions.push(".tsx");
  config.resolve.extensions.push(".ts");
  config.module.rules.push(
    test: /\.(ts|tsx)$/,
    loader: require.resolve("babel-loader"),
    options: 
      presets: [
        "@babel/preset-env",
        "@babel/preset-react",
        "@babel/preset-typescript"
      ]
    ,
    test: /\.(png|svg|jpg|gif)$/,
    loader: 'url-loader',
    options: 
      limit: true,
      generator: content => svgToMiniDataURI(content.toString()),
    ,
  );
  return config;
;

【讨论】：

我应该用根 webpack 文件替换它吗？

我收到“错误！错误：规则在 '

中只能有一个结果源（提供的使用和加载器）

我已经更新了我的答案。不要更改 .storybook/webpack.config.js，而是在 libs/storybook/.storybook/webpack/config.js 中添加上述代码

错误：模块解析失败：意外令牌 (44:4) 使用这些加载器处理文件：* ./node_modules/@storybook/source-loader/dist/server/index.js 您可能需要一个额外的加载器来处理这些加载器的结果。 | export const defaultStory = addSourceDecorator(() => | return (>

它在编译时有很多警告。并在浏览器上报错。