使用vue3动态绑定img src

Question

i want to pass an img url from component to another and bind it dynamically but every time i got 404 not (the path is correct ) first Component: <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();
},

second component

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

},

Answer 1

Are these components stored in the same directory? If not, it could cause this issue. Try to use '@/assets/images/references/batiment/batiment-project1.svg' instead of '../assets/images/references/batiment/batiment-project1.svg' . In vue3 @ means src folder.