如何在 Webpack 上正确添加图像路径以从故事书加载图像

Question

我有一个包含此文件夹树的项目：

- myProject
    - .storybook
        - Project.js
        ...
        - webpack.config.js
    - storybook-static
        - images
            - logo.svg

myProject/.storybook/webpack.config.js 文件如下所示：

const path = require('path');

module.exports = async ({ config, mode }) => {
// `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
// You can change the configuration based on that.
// 'PRODUCTION' is used when building the static version of storybook.

// Make whatever fine-grained changes you need
config.module.rules.push({
  test: /\.scss$/,
  use: ['style-loader', 'css-loader', 'sass-loader'],
  include: path.resolve(__dirname, '../'),
});

// Return the altered config
return config;

}

Project.js 文件包含以下内容：

import { create } from '@storybook/theming';

export default create({
  base: 'light',
  brandTitle: 'My Project',
  brandUrl: '',
  brandImage: '/images/logos/logo.svg',
});

我正在部署故事书，我遇到的问题是 logo.svg 文件，服务器没有加载它。当运行故事书构建一切正常时，每个图像都正确加载，但在部署时，在 Project.js 中调用的图像没有。也许这是因为服务器不从域根目录而是从子目录提供根文件夹。我已经尝试对故事书 webpack 文件进行一些更改，在其上添加 config.output，类似于：

const path = require('path');

module.exports = async ({ config, mode }) => {
// `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
// You can change the configuration based on that.
// 'PRODUCTION' is used when building the static version of storybook.

// Make whatever fine-grained changes you need
config.module.rules.push({
  test: /\.scss$/,
  use: ['style-loader', 'css-loader', 'sass-loader'],
  include: path.resolve(__dirname, '../'),
}),


config.output = {
  path: path.join(__dirname, 'storybook-static'),
  publicPath: path.resolve("../storybook-static/")
};




 // Return the altered config
 return config;
}

但这也行不通。

有什么想法吗？

Answer 1

问题出在 Project.js 文件中，我尝试在其中加载图像。 brandImage 键有一个绝对路径而不是相对路径：

import { create } from '@storybook/theming';

export default create({
  base: 'light',
  brandTitle: 'My Project',
  brandUrl: '',
  brandImage: '/images/logos/logo.svg',
});

应该更改为：

import { create } from '@storybook/theming';
    
    export default create({
      base: 'light',
      brandTitle: 'My Project',
      brandUrl: '',
      brandImage: './images/logos/logo.svg',
    });

路径开头有一个点。

如何在 Webpack 上正确添加图像路径以从故事书加载图像

How to properly add image path on Webpack to load image from storybook

webpack

storybook