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

I have a project with this folder tree:

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

The myProject/.storybook/webpack.config.js file looks like:

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;

}

The Project.js file contains the following:

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

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

I am deploying storybook and the problem I have is with the logo.svg file, the server does not load it. When running the storybook build everything works fine, each image loads correctly but when deploying, the image called in Project.js does not. Maybe this is because the server does not serve the root folder from the domain root but from a subdirectory. I've tried some changes in storybook webpack file, adding config.output on it, similar to this:

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

But this doesn't work either.

Any ideas?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source