使用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文件夹。