Storybook: Wrong documentation on serving static files

[Frikki]

Bug or support request summary

Following the documentation for serving static files as presented here produces broken images with this path: /static/media/[name].[hash:8].[ext]

The documentation explicitly mentions:

This is enabled with our default config. But, if you are using a custom Webpack config, you need to add the file-loader into your custom Webpack config.

The issue is that adding the _file-loader_ into my custom Webpack configuration is what breaks the functionality.

Steps to reproduce

webpack.config.js

module.exports = (baseConfig, env, defaultConfig) => {
    defaultConfig.module.rules.push({
        test: /\.(gif|jpg|png)(\?.*)?$/,
        loader: require.resolve('file-loader'),
    })

    return defaultConfig
}

In fact, omitting to add the _file-loader_ to the custom Webpack config correctly displays the images. Thus, I assume that the documentation is outdated and wrong.

Please specify which version of Storybook and optionally any affected addons that you're running

• @storybook/[email protected]

Affected platforms

• Chrome, Safari, macOS High Sierra v10.13.4

Screenshots / Screencast / Code Snippets (Optional)

import React from 'react';
import { storiesOf } from '@storybook/react';

import imageFile from './static/image.png';

const image = {
  src: imageFile,
  alt: 'my image',
};

storiesOf('<img />', module)
  .add('with an image', () => (
    <img src={image.src} alt={image.alt} />
  ));

[wuweiweiwu]

Thats interesting. Because that path is the default path/filename that the default configs resolve to.

What if you try full control mode instead of overriding the default file-loader which already supports gif|jpeg|png Does it work?

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[stale[bot]]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!

[adbutterfield]

Hi - I just wanted to drop a comment real quick. I just encountered this very same problem. Removing file-loader form my webpack config also fixed the issue for me.