storybook: Link to brandImage not working

Describe the bug During upgrade from 5.2.8 to 5.3.3 my brandImage stopped working.

I have a custom theme, using a static assets folder for the image

./storybook
 - ./public
   - logo.svg

Previously I had me theme defined like this:

import { create } from '@storybook/theming';
import logo from './public/logo.svg';

export default create({
  base: 'light',

  brandImage: logo,
  brandTitle: 'Custom - Storybook'
});

After updating to 5.3.3 I’ve moved my theming to manager.js, like so

import { addons } from '@storybook/addons';
import { create } from '@storybook/theming/create';
import logo from './public/logo.svg';

const theme = create({
  base: 'light',

  brandImage: `/${logo}`,
  brandTitle: 'Custom - Storybook'
});

addons.setConfig({
  panelPosition: 'bottom',
  theme
});

But the logo.svg does not show up when I start storybook using start-storybook -p 6006 -s ./.storybook/public.

If I however do a static build via build-storybook -s ./.storybook/public, the logo shows up correctly.

Webserver fetches the logo from /media/static/logo.svg in both cases. But it seems the local webserver started when starting storybook locally does not correctly allow fetching images from this folder.

System: Environment Info:

System: OS: macOS 10.15.2 CPU: (12) x64 Intel® Core™ i7-9750H CPU @ 2.60GHz Binaries: Node: 13.6.0 - ~/.nvm/versions/node/v13.6.0/bin/node Yarn: 1.19.1 - /usr/local/bin/yarn npm: 6.13.4 - ~/.nvm/versions/node/v13.6.0/bin/npm Browsers: Chrome: 79.0.3945.117 Safari: 13.0.4 npmPackages: @storybook/addon-a11y: ^5.3.3 => 5.3.3 @storybook/addon-actions: ^5.3.3 => 5.3.3 @storybook/addon-docs: ^5.3.3 => 5.3.3 @storybook/addon-knobs: ^5.3.3 => 5.3.3 @storybook/addon-links: ^5.3.3 => 5.3.3 @storybook/addon-notes: ^5.3.3 => 5.3.3 @storybook/addon-viewport: ^5.3.3 => 5.3.3 @storybook/addons: ^5.3.3 => 5.3.3 @storybook/angular: ^5.3.3 => 5.3.3

About this issue

  • Original URL
  • State: closed
  • Created 4 years ago
  • Reactions: 11
  • Comments: 20 (13 by maintainers)

Most upvoted comments

A temporary solution until it’s fixed:

import logoUrl from './public/logo.svg';

const theme = create({
  brandImage: (process.env.NODE_ENV === 'production') ? logoUrl : '/logo.svg',
build-storybook
start-storybook -p 6006 -s .storybook/public

Whoopee!! I just released https://github.com/storybookjs/storybook/releases/tag/v5.3.18 containing PR #9646 that references this issue. Upgrade today to try it out!

@shilman would it be possible to backport the fix to the 5.3.x branch and republish? It’s in the 5.3 hotlist, but it seems it was mistakenly merged to a prerelease branch. I’m still unable to update storybook because of this bug.

Thanks for testing @cone56! I’ll see what we can do this week.

Jeepers creepers!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.0.0-alpha.7 containing PR #9646 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

Closing this issue. Please re-open if you think there’s still more to do.

Still waiting for this? He doesn’t seem to be very active.

@jcousins-ynap yes, my PR fixes that

I have a PR open with a fix

If you’re able I’d love a review @SuneRadich

Nicely done @ndelangen much appreciated.

I’m finding that the brand image URL is being defined, but locally it can’t find static/media/brandImage.filename.png but when built the image exists in that location.