input type="file" を隠してクリックできるようにしたい。

Question

前提・実現したいこと

画像のように
①写真のボーダーと（border:none;では消せませんでした）写真の壊れているマーク？を消して
②『ファイルを選択　選択されていません』を消して、代わりに写真が表示される箇所をクリックするとファイル選択ができて、
③ファイルを選ぶと画像のプレビューがで出てくるようにしたいです。

該当のソースコード

<template>
    <div class="img-container">
      <input type="file" ref="file" @change="setImage" class="input" />
      <img :src="data.image" class="img">
    </div>
  </div>

</template>
<script>
export default {
  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>
<style scoped>
  .img-container {

  }
 .input {

 }

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

window.Vue = require('vue');

Vue.component('picture-component', require('./components/PictureComponent.vue').default);

const picture = new Vue({
    el: '#picture',
});

    <div id="picture">
      <picture-component></picture-component>
    </div>

Comments

[yambejp]

条件が不足しています

> 写真の部分をクリックして画像を選択できる

ファイルを選ぶと画像のプレビューができるということですか？

[neginattofan]

ファイルを選ぶと画像のプレビューができるということです。修正します。

Answer 1

.input {
  display: none;
}
```で消せばいいんでは？

Comments

[neginattofan]

ありがとうございます。回答いただいたコードでは①は実現できますが、②と③も同時に実現できず、困っています。

[neginattofan]

①ではなく②でした。

Answer 2

labelを使うとうまくいくかもしれません

<label class="img-container">
  <input type="file" ref="file" @change="setImage" class="input" />
  <img :src="data.image" class="img">
</label>

.img-container {
  position: relative;
}
.img-container input[type="file"] {
  position: absolute;
  opacity: 0;
  /* display: none;でも良さそうですが、IEなどで上手く挙動しなさそうな気もします。調べてほしいです。 */
}

Answer 3

imgにaltを指定しておけばよいのでは？