Question

我有一个用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 />;

库/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

Answer 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;
};

Nrwl故事书React不渲染图像

1 个答案: