◆ innerHTML で DOM 作ったあとでも一度 JavaScript の処理が終わらるまでは画像のロードされないみたい

ちょっとしたビュワーを作ったらパス解決でちょっとめんどうなことになりました
イメージとしてはマークダウンなどのように文字列をベースに HTML 形式で表示するものです

普段は その元となるテキストファイルからの相対パスで そこに使う画像パスを指定しています
そうしないと作ってる段階のプレビューとかの確認の都合で不便なんです

でも 実際に表示するのはビュワーの方なのですが ビュワーではその表示する HTML の元になるテキストファイルへの相対パスを書いておいてそのページを fetch で取得して HTML 生成します
となると 画像など外部データのパスはテキストファイルからの相対パスになっているのにブラウザからはビュワーからの相対パスとして処理されてしまいます


HTMLの元になるテキストデータ
/data/abcd.txt
画像の場所は [img/abcd.img] !
画像のパス
/data/img/abcd.img

ビュワー

/viewer/index.html
テキストデータは [../data/abcd.txt] !

(表示されたページ)
画像の場所は [img/abcd.img] !
/viewer/img/abcd.img にファイルはないからエラー画像になります


いい方法がないものかと考えたのですが 結局生成された HTML から相対パス部分を自分でどうにかするしかなさそうです

解決策はこんなになりました
$("#content").innerHTML = html
Array.from($("#content").querySelectorAll("img"), e => {
e.src = new URL(e.getAttribute("src"), new URL(textfile_path, location.href).href).href
})

テキスト状態で URL っぽいのを取り出すのはさすがに嫌だったので innerHTML に入れたあとで DOM の検索で画像の src 属性を変更しています
リンクがアレば a タグで href をすれば OK です

機械的な HTML 出力なので変なところに data-url みたいのがなくて場所も限られているのでまぁよしとします

それとこのコードでは innerHTML に入れて DOM を構築した後に URL を切り替えているので ムダにエラーばっかりになる間違ったパスで画像のロードは起きてないです
いったん JavaScript の処理が完全に終わってしまわないと URL の画像の取得はされないみたいです