📌

@nuxt/imageでstaticディレクトリの画像が表示されない対処法

2022/10/19に公開

Nuxt

Cloudflare

tech

概要

Nuxt.jsの公式モジュール、@nuxt/imageを使用して、画像のWebP対応をした
使ったのは <nuxt-img /> ではなく、 <nuxt-picture />
ローカル環境では正常に表示できるが、Cloudflare pagesでビルドをすると、画像が一瞬表示された後、表示されなくなる
- なお、前に使っていたNetlifyでは正常表示されていた

実際の実装部分のコード

<nuxt-picture :imgAttrs="{class: 'w-100'}" src="/icon.png" />

考察

一瞬だけ表示される
- 何らかのフォールバック画像が表示された後、本読み込みが正しくできてない？
Netlifyでは表示されていた
- ビルド環境・ホスティング環境の問題？

公式ドキュメントを見てみる

とりあえず自分の書き方が間違ってないか確認してみよう

載っていたexampleがこちら、特に問題なさそうだ。

<nuxt-picture
  src="/nuxt-icon.png"
  :imgAttrs="{id:'my-id', class:'my-class', style:'display:block', 'data-my-data': 'my-value'}"
/>

そういえば画像を入れるディレクトリはstaticディレクトリであってるんだっけ？

設定不要でstaticディレクトリを認識すると書いてある。
なるほど、こいつらはデフォルトプロバイダって呼ばれるのか。

これがデフォルトプロバイダの説明。

Default Provider
The default provider for Nuxt Image is ipx or static (for target: static). Either option can be used without any configuration.

ipxとstatic....?
そういえば、ビルドされたサイトの画像についてるプレフィックスがipxになってる。

....こいつが原因か。

原因と対処

原因は target: static を明示的に指定していなかったことでした。

今までは何故かわかりませんが暗黙の了解的にデフォルトプロバイダがstaticになっていたようなのですが、何かの拍子に（なぜかわからないけど）ipxになってしまったようで、表示ができていなかったようです。

対処

ここまできたらわかりそうですが、nuxt.config.jsにtargetを明示的に書けばOKです。

(というか実はちゃっかりCloudflare pagesのビルドログにも載っていた)

11:44:44.548	Executing user command: nuxt generate
11:44:45.218	
11:44:45.219	 WARN  When using nuxt generate, you should set target: 'static' in your nuxt.config
11:44:45.219	       👉 Learn more about it on https://go.nuxtjs.dev/static-target
11:44:45.219

nuxt.config.jsに以下のように追記します。

export default {
  // targetを追記する
  target: "static",

  head: {
    title: 'hoge-web',
    htmlAttrs: {
      lang: 'en'
    },
    // ....
  },
  
  // ....
}

あとはコミットすれば、ちゃんと表示されるはずです！

概要

考察

公式ドキュメントを見てみる

原因と対処

対処

Discussion