Image paths point to _ipx directory in storybook export

[lloydtao]

Component

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

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

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.

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

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",

[lloydtao]

For anyone with this problem, I'm using this workaround:

<template>
  ...
  <template v-if="server">
    <nuxt-img
      class="object-cover h-48 md:h-64 xl:h-48 w-full md:w-96"
      :src="image"
      width="640"
      height="360"
      :alt="'Preview image for' + project"
    />
  </template>
  <template v-else>
    <img
      class="object-cover h-48 md:h-64 xl:h-48 w-full md:w-96"
      :src="image"
    />
  </template>
  ...
</template>

<script lang="ts">
export default {
  data() {
    return {
      server: process.server,
    }
  },
  ...
}
</script>

Looks good in deployment, so I'll keep it for now.