Open lloydtao opened 2 years ago
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.
Component
Using
yarn generate
and thenyarn 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 inyarn storybook
andyarn dev
:So, either
@nuxtjs/storybook
needs to utilise server-side rendering, or@nuxt/image
needs to handle the case ofprocess.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:The resulting storybook uses the
_ipx/
path instead of_nuxt/
for images.Packages