如何在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',
});

路径开头有一个点。