nuxt / nuxt/image

Image paths point to _ipx directory in storybook export

Open
#590 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

v0
Dominant language
TypeScript
Stars
1.5k
Forks
331
Avg merge
19h 52m
Merged PRs (30d)
9

Description

Component
<nuxt-img
  src="/images/square.png"
  ...
/>

Using yarn generate and then yarn start, optimised images are found in the _nuxt/ directory as expected:

image

Issue

The @nuxtjs/storybook module offers the ability to build (export) a storybook as a static site.

However, since this doesn't utilise server-side rendering, the <nuxt-img> component will point to the _ipx/ provider path in this build.

image

This image is available at the _ipx/ path in development mode, such as in yarn storybook and yarn dev:

image

So, either @nuxtjs/storybook needs to utilise server-side rendering, or @nuxt/image needs to handle the case of process.server = false when serving local static files.

Let me know if I need to take this to nuxt-community/storybook instead.

Reproduction

Using @nuxtjs/storybook, execute the command:

yarn storybook build

The resulting storybook uses the _ipx/ path instead of _nuxt/ for images.

Packages
"nuxt": "^2.15.8",
"@nuxt/image": "^0.7.1",
"@nuxtjs/storybook": "^4.3.2",

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by running yarn storybook build with the listed Nuxt, @nuxt/image, and @nuxtjs/storybook versions, then compare the exported image paths with those from yarn generate and development mode. Trace how the static Storybook build selects the image provider. Done means exported stories reference available image files rather than _ipx/ paths.

Written by the indexing model from the issue text.

Assessment

Tech stack
nuxt
Domain
build-system, frontend, web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.