とか色々やりました。HTML側で画像を指定したほうがいいと。
しかしtransition効かせたいとかの場合、imgタグで書いてると出来ない。
結局は最適解はHTMLのタグにstyle属性でbackground-imageですね。
<div style="background-image: url('./img/img1.jpg')"
これならtransitionとかも効かせられるし、トリミングもサイズ決めてcoverするだけでけっこう楽です。(下記参照)
で、気をつけるべきは
これの通りですが、
<div style="background-image: url("./img/img1.jpg")"
としないこと。background-imageのURLはシングルクォーテーションで囲いましょう。じゃないとこのように認識してしまいます。
【追記】
とはいえタグの意味は文書の構造によるので、写真としてメインのコンテンツであればdivにstyleでbackground-imageよりimgタグ使うべき、だそうです。 サムネイルとか、画像が装飾であればbackground-imageでいいそうです。