时间戳

首页 > 解决方案 > Nrwl Storybook React 不渲染图像

reactjs - Nrwl Storybook React 不渲染图像

问题描述

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

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

标签： reactjsstorybooknrwl

解决方案

我认为您没有使用任何图像加载器，您可以通过将其添加到 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;
};

推荐阅读