Nuxt で 静的画像を lazyload をする方法
- 公開日時
こんな感じで data-src に画像パスをバインディングしてしまうと HTML でもそのまま data-src="~/assets/images/pc-xx.jpg" と出力されてしまい画像を読み込めません。
こんな感じで data-src に画像パスをバインディングしてしまうと HTML でもそのまま data-src="~/assets/images/pc-xx.jpg" と出力されてしまい画像を読み込めません。
nuxt で異なるレイアウトファイルを使ったページ間の遷移の際に <transition> コンポーネントが使えず困っていました。 同一レイアウトの遷移はフェードイン / アウトで入れ替わるのにレイアウトが異なるときはパッと切り替わってしまったり。
Nuxt.js にて SSR かブラウザの処理かを判定する方法として『process.browser で分岐する』というものがよく知られているかと思います。
フロントエンド専門。フリーランスで10年以上活動しています。