使用vue3動態綁定img src

Question

我想將一個 img url 從一個組件傳遞到另一個組件並動態綁定它但是每次我得到 404 不是（路徑是正確的）第一個組件： <a @click=" details( '../assets/images/references/batiment /batiment-project1.svg', '../assets/images/references/batiment/batimentProject2.svg', '../assets/images/references/batiment/batimentProject3.svg', '../assets/images/ references/batiment/batimentProject4.svg' ) " >En savoir plus</a >

 details(image111, image222, image333, image444) {
  this.image11 = image111;
  this.image22 = image222;
  this.image33 = image333;
  this.image44 = image444;
  new bootstrap.Modal(document.getElementById("staticBackdrop")).show();
},

第二部分

          <img class="col-4" width="100%" v-bind:src="image2" alt="" />
 props: {
image1: String,
image2: String,
image3: String,
image4: String,

},

Answer 1

這些組件是否存儲在同一目錄中？ 否則，可能會導致此問題。 嘗試使用'@/assets/images/references/batiment/batiment-project1.svg'而不是'../assets/images/references/batiment/batiment-project1.svg' 。 在vue3 @表示src文件夾。