HTMLとかで同じ画像のパスを直書きで複数箇所に指定する場合は修正漏れが起きる可能性があるのでJavascriptで画像のパスを1箇所で管理しよう

<img class="imgBackgroundSize imgTop js-imgTop" src="./img/img1.jpg"></img>
<img class="imgBackgroundSize imgTop js-imgTop" src="./img/img2.jpg"></img>

<img class="thumnail imgBackgroundSize" src="./img/img1.jpg"></img>
<img class="thumnail imgBackgroundSize" src="./img/img2.jpg"></img>

のような感じで、複数箇所に同じ画像を使いたいと。

しかし画像を差し替えたりなど、修正したときに片方の画像のみのパスしか変えないで片方を変え忘れる危険性があります。

なので、1箇所で管理したほうが安全です。

そのような際にどうするか？

EJS, pug等で展開したり、あるいはJS読み込み時にJSから要素を複製したり

が主な手段のようです。

前者の手段はあまりよくわからなかったので、JSで画像を管理することにしました。

jQueryのattrメソッドを使って、指定したHTMLに画像のパスを書き込みます。

semooh.jp

$(".imgTop:nth-of-type(1), .thumnail:nth-of-type(1)").attr({
  src: "./img/img1.jpg"
});
$(".imgTop:nth-of-type(2), .thumnail:nth-of-type(1)").attr({
  src: "./img/img2.jpg"
});

こんな感じでやると、Javascriptで画像を1箇所で管理できるので、修正漏れが起きる可能性を減らせます。