3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Next.js + TailwindcssでのBackgroundImage(背景画像)の設定の仕方。

Last updated at Posted at 2021-09-02

はじめに

初投稿になります。
あまりにもしょうもないことではまってしまったことが悔しくて投稿に至りました。

#本題
Next.js単体で調べると一瞬で出てくるのですが、Next.jsではpublic以下に画像を保存させます。
ここまでは公式ドキュメントを見れば誰でもわかるのですが、問題はCSS in JSではなくTailwindcssで表示させたい場合はこちらを読んでいただいて

tailwind.config.jsでの表記の仕方は
例: public/images/hoge.png → /images/hoge.png
です。
publicは/←こいつで省略しないといつまで経っても画像が表示されません。

#結局何が悔しいの?
何が言いたかったのかというと、調べ方一つ変えただけで、一日もはまってしまったことに一瞬で解決できたということです。
(大体のエラー解決はそんなものかもしれませんが・・・)
あと、公式ドキュメントがすごく優秀なので、ちゃんと理解していればこんなエラーに遭遇することはなかったです。。。

#最後に
あまりにも拙い文章ですが、Twitterでも何名かはまっているみたいなので書き記しておこうかなと思います。

3
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?