[{"data":1,"prerenderedAt":108},["ShallowReactive",2],{"legacy-question-6d9604624f1965fd92f3a85698c262b7":3,"legacy-question-author-koji-kadoma":81,"legacy-question-category-website-building":97},{"id":4,"title":5,"author":6,"body":7,"category":68,"date":69,"description":5,"extension":70,"locale":71,"meta":72,"navigation":73,"path":74,"seo":75,"slug":76,"stem":77,"tag":78,"updated":69,"__hash__":80},"legacyQuestions\u002F20210402000000-Gridsomeでの画像の使い方・保存場所.md","Gridsomeでの画像の使い方・保存場所","koji-kadoma",{"type":8,"value":9,"toc":63},"minimark",[10,14,18,29,35,38,41,44,47,50,60],[11,12,13],"h2",{"id":13},"画像の呼び出し方は二つ",[15,16,17],"p",{},"Gridsomeでは画像の呼び出しにオリジナルの「g-image」というコンポーネントを用意しています。GridsomeはVue.jsなので、通常通りimgタグを使うことも可能です。",[19,20,25],"pre",{"className":21,"code":23,"language":24},[22],"language-text","\u002F\u002F g-imageコンポーネント\n\n\u003Cg-image src=\"~\u002Fassets\u002Fimgs\u002Ftitle.png\" width=\"83px\" :alt=\"$static.metadata.siteName\"\u002F>\n","text",[26,27,23],"code",{"__ignoreMap":28},"",[19,30,33],{"className":31,"code":32,"language":24},[22],"\u002F\u002F 通常のimgタグ\n\n\u003Cimg :src=\"'~\u002Fassets\u002Fimgs\u002Ftitle.png'\" width=\"83px\" :alt=\"$static.metadata.siteName\"\u002F>\n",[26,34,32],{"__ignoreMap":28},[15,36,37],{},"コード的には、g-image方がシンプルに使えるというメリットがありますが、変数を含む場合はどちらにしろプロパティにするのであまり差はありません。",[15,39,40],{},"しかし、g-imageコンポーネントは、画像を内部的に最適化してくれるので、アイコンなどのサイト全体で使う画像はg-imageにした方が良いかもしれません。",[11,42,43],{"id":43},"画像の保存場所は二つ",[15,45,46],{},"Gridsomeでは、他の静的サイトジェネレータと同様に、プロジェクトルートのstaticディレクトリの中身を、そのままプロジェクトルートに設置します。ですので、static以下に画像を保存すればまず問題なく使えます。",[15,48,49],{},"一方で、src以下にassetsディレクトリ（デフォルトではない）を作成すれば、テンプレートなどVue.jsのコードからアクセスしやすくなります。どちらにするかは、画像の運用方法次第ですが、",[51,52,53,57],"ol",{},[54,55,56],"li",{},"常に使う画像 => src\u002Fassets",[54,58,59],{},"ページごとに使う画像 => static\u002Fimg",[15,61,62],{},"とするのが多いようです。",{"title":28,"searchDepth":64,"depth":64,"links":65},2,[66,67],{"id":13,"depth":64,"text":13},{"id":43,"depth":64,"text":43},"website-building","2021-04-02T03:00:00.000Z","md","ja",{},true,"\u002F20210402000000-gridsome",{"title":5,"description":5},"6d9604624f1965fd92f3a85698c262b7","20210402000000-Gridsomeでの画像の使い方・保存場所",[79],"gridsome","Q7p0LthhjdahMKA-n5QcpkRVqdMYaBb7VtI8bWxmbyk",{"id":82,"title":83,"body":84,"date":88,"description":89,"extension":70,"locale":71,"meta":90,"name":93,"navigation":73,"path":94,"seo":95,"slug":6,"stem":6,"updated":88,"__hash__":96},"legacyAuthors\u002Fkoji-kadoma.md","Koji Kadoma",{"type":8,"value":85,"toc":86},[],{"title":28,"searchDepth":64,"depth":64,"links":87},[],"2021-04-01T00:00:00.000Z","Webエンジニアです。Javascript、PHP、Ruby、Dockerなどをメインで使っています。",{"image":91,"url":92},"https:\u002F\u002Fwww.codit.work\u002Fimgs\u002Favatar\u002Fkoji-kadoma.png","https:\u002F\u002Fkoji.pages.dev\u002F",null,"\u002Fkoji-kadoma",{"title":83,"description":89},"H1yaGicrsv1CzYTbFeEXQosuYx93lIutD3_XwXMhAFk",{"id":98,"title":99,"body":100,"date":88,"description":99,"extension":70,"locale":71,"meta":104,"navigation":73,"path":105,"seo":106,"slug":68,"stem":68,"updated":88,"__hash__":107},"legacyCategories\u002Fwebsite-building.md","Webサイト構築",{"type":8,"value":101,"toc":102},[],{"title":28,"searchDepth":64,"depth":64,"links":103},[],{},"\u002Fwebsite-building",{"title":99,"description":99},"h9jPLD2mzMm3L4sFN5qWSiSirySQQLdnxLhQcvw8VlQ",1783320301774]