CLIを何となくで使っていると、つまづいてしまうのでが画像パスの指定です。今回はどのフォルダに何を置いて、どのようにパスを指定すればいいのかまとめておきます。CLIにはsrc/assets/img内と、public/img内の2箇所の配置場所があります。それぞれ参照方法も画像の扱いも違ってきます。assets内assetsのimg内に配置する場合は、最終的に表示されるときには、base64という形式にエンコードされて出力されます。そのため、画像のキャッシュはされませんし、ただURLで参照しているわけではないので、CSSのbackground-imageなどでパスを書いて呼び出そうとしても、そのパスには画像がないので表示されません。呼び出すときには、assetsの前に@/をつけるのが特徴です。src="@/assets/img/sample.png">src属性やv-bindの:srcで使うときにはassets内に画像を置いて指定します。public内public内に配置した画像ファイルは、プロジェクトルートにそのまま移動されます。エンコードもされないので、「/public」も省いて普通に画像パスを入力すれば表示されます。src="/assets/img/sample.png">CSSのbackground-imageで利用したい画像は、publicに入れておかないと表示されないので注意が必要です。2箇所の使い分けこの2箇所の使い分けは、webpackでコンパイルしたいかどうかの違いです。assets:webpackでコンパイルしたいpublic:webpackでコンパイルしたくないCSSで利用したい場合は、コンパイルされてしまうとCSSで参照できなくなるのでpublicに置く必要があります。普通にsrc属性にセットする画像であれば、どちらでもよさそうですが、webpackでコンパイルするとbase64形式になるので、base64形式のメリットが受けられます。画像自体のHTTPリクエストが発生しないファイルサイズの小さな画像をいっぱい読み込む場合は、base64で読み込んだ方がリクエストが減らせるただ、base64形式にするデメリットも存在します。base64だとデータサイズが約37%増加するキャッシュされないファイルサイズの小さな画像やロゴはassetsに入れて、大きな画像やCSSで参照する画像はpublicがよさそうです。マサカズ@31mskz101997年生まれ。2016年から専門学校でデザインについて勉強。卒業後は神戸の制作会社「N'sCreates」にウェブデザイナーとして入社。このブログでは自分の備忘録も兼ねて、ウェブに関する記事や制作環境を効率的に行うための記事を書いています。Webrandum表示設定ダークモードこの機能はCookieを使用して、設定した内容を保存しています。個人を特定したりするものではありませんが、気になる方はプライバシーポリシーをご覧ください。システム設定に合わせる。