imgタグのsrc属性の中身の一部を動的にしたい

Question

前提・実現したいこと

imgタグのsrc属性の中身の一部を動的にしたいです。
具体的には特定の決められたフォルダに「店舗ID.jpg」という画像が沢山格納されている状況だとして

<img src="/hoge/fuga/{shop.id}.jpg">

のイメージです。
※「店舗ID：店舗ごとに固有に割り振られている英数字」
shop.idはAPIの返却を元にjavascriptの方で受け取っているものとなります。
初歩的な内容ですが上手いやり方が思いつかず、お力添えいただけますと幸いです。

Answer 1

vue.jsを利用していたので

<img :src="'/hoge/fuga/' + shop.id + '.jpg'">

で解決できました。

Answer 2

<script>
const shop={id:123};
window.addEventListener('DOMContentLoaded', ()=>{
  document.querySelectorAll('img').forEach(x=>{
    const src=x.getAttribute('src');
    if(/\{shop.id\}/.test(src)){
      x.setAttribute('src',src.replace('{shop.id}',shop.id));
    }
  });
});
</script>
<img src="/hoge/fuga/{shop.id}.jpg">

Comments

[Lhankor_Mhy]

Vue.js タグが付いてますので……

[yambejp]

あらほんと・・・