Question

我的nuxt应用在开发环境中运行良好，但是一旦生成静态页面，即使生成的页面中包含一些代码，包含v-for =的页面也会完全变为白色。这是错误吗？

以下是页面内容：

<template>
  <section class="page">
    <figure v-for="n in 4">
      <picture>
        <source :srcset="require('~/data/' + detail.id + '-' + n + '.jpg?webp')" type="image/webp" />
        <source :srcset="require('~/data/' + detail.id + '-' + n + '.jpg')" type="image/jpeg" />
        <img :src="require('~/data/' + detail.id + '-' + n + '.jpg')" />
      </picture>
    </figure>
  </section>
</template>

<script>
import details from '~/data/details.json'

export default {
  asyncData ({ params }) {
    return { details }
  },
  data () {
    return {
      id: this.$route.params.id,
    }
  },
  computed: {
    detail () {
      return this.details.find(detail => detail.id === this.id)
    }
  }
}
</script>

和.json

[
  {
    "id": "screen-one"
  },
  {
    "id": "screen-two"
  },
  {
    "id": "screen-three"
  }
]

然后。正如我立即在此问题中引起的那样，我是在nuxt.config.js中手动添加了网址

  generate: {
    routes: [
      '/screen-one',
      '/screen-two',
      '/screen-three'
    ]
  },

图像（如screen-one-1.jpg）位于数据文件夹中。

页面名为_id.vue

Answer 1

问题与“？webp”有关，与“ @ bazzite / nuxt-optimized-images”相关性有关。我不记得是什么问题，但与v-for或nuxt本身无关。谢谢！

如果使用v-for

1 个答案: