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?

Solution

The problem was in the Project.js file, where I try to load the image. The brandImage key has a absolute path instead of relative one:

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

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

It should be changed by:

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

With a dot at the beginning of the path.