vue.js+laravel5.8で商品変更画面の写真のsrcを変えるには

Question

新しく商品を作るときの画像アップロードは、 toggle: 'true'　を渡して、
商品編集の際には toggle: 'false'を渡して、
二つあるimgタグのどちらかを表示させるようにしました。

問題なのは商品変更の際に、データベースに保存されたsrcは /storage/ * pic で表示できますが、
その編集画面の時に、新しく写真を追加されるとどうすればいいのか分かりません。

動的にimgタグを表示、日表示する必要があるのでしょうか？
vueに初めて触るので良い方法が分かりません。

よろしくお願いします。

      <input type="file" ref="file" @change="setImage" class="input" name="pic1"/>
      <img :src="data.image" class="img" v-show="toggle == 'false'">
      <img :src="/storage/ + pic" class="img" v-show="toggle == 'true'">
    </div>

<script>
export default {
  props: [
    'pic',
    'toggle'
  ],
  data() {
    return {
      data: {
        image: "",
        name: "",
      }
    };
  },
  methods: {
    setImage(e) {
      const files = this.$refs.file;
      const fileImg = files.files[0];
      if (fileImg.type.startsWith("image/")) {
        this.data.image = window.URL.createObjectURL(fileImg);
        this.data.name = fileImg.name;
        this.data.type = fileImg.type;
      }
    },

  }
};
</script>

Answer 1

javascriptからsrcを入れることで解決しました。

<template>
  <div class="c-product__item" >
    <div class="c-product__info"><div class="c-product__name">画像</div><div class="c-product__warning">必須</div></div>
    <div class="img-container">
      <input type="file" ref="file" @change="setImage" class="input" name="pic1"/>
      <img :src="/storage/ + pic" class="img">
    </div>
  </div>
</template>
<script>
export default {
  props: [
    'pic',
  ],
  data() {
    return {
      data: {
        image: "",
        name: "",
      }
    };
  },
  methods: {
    setImage(e) {
      const files = this.$refs.file;
      const fileImg = files.files[0];
      const preview = document.querySelector('img');
      if (fileImg.type.startsWith("image/")) {
        this.data.image = window.URL.createObjectURL(fileImg);
        this.data.name = fileImg.name;
        this.data.type = fileImg.type;
        console.log(this.data.image);
        console.log(this.data.name);
        console.log(this.data.type);
        preview.src = this.data.image;
      }
    },

  }
};
</script>
<style scoped>
  .img-container {
    width: 300px;
    height: 300px;
    position: relative;
  }
 .input {
   position: absolute;
   opacity: 0;
   height: 100%;
   width: 100%;
 }

 .img {
   width: 300px;
   height: 300px;
   background: #f2f2f2;
   object-fit: cover;
 }
</style>