web-dev-qa-db-ja.com

Nuxt：静的フォルダーからローカル画像を表示する

enter image description here

私はnuxtを始めています。私の静的フォルダはスクリーンショットにあります。フォローしようとしています https://nuxtjs.org/guide/assets/#static

SrcとしてURLを使用して正常に機能していたvuetifyカルーセルコンポーネントがあります。ここで、ローカルの静的ファイルを提供しようと思います。私は試した：

    <template>
  <v-carousel>
    <v-carousel-item v-for="(item,i) in items" :key="i" :src="item.src"></v-carousel-item>
  </v-carousel>
</template>


    <script>

export default {
  data () {
    return {
      items: [
        {
          src: '/static/52lv.PNG'
        },
        {
          src: 'https://cdn.vuetifyjs.com/images/carousel/sky.jpg'
        },
        {
          src: 'https://cdn.vuetifyjs.com/images/carousel/bird.jpg'
        },
        {
          src: 'https://cdn.vuetifyjs.com/images/carousel/planet.jpg'
        }
      ]
    }
  }
}
</script>

しかし、開発サーバーを実行すると、カルーセルのそのイメージに対して空白の画面が表示されます。 URL付きの他の画像は正常に機能します。

ブラウザの空白の要素を調べると、次のように表示されます。

enter image description here

この画像を表示するにはどうすればよいですか？

javascriptnode.jsvue.jsnuxt.js
3
user61629

静的フォルダーを指定する必要はありません。次のようにするだけです。

  src: '/52lv.PNG'
7
ryeMoss

静的フォルダの代わりに画像が「〜assets/images/521v.PNG」にある場合はどうなりますか？

ありがとう

3
Nelson La Rocca