基础设置

首先，确保你的项目中已经安装了Vue.js。你可以通过CDN链接或npm来安装：

<!-- 通过CDN安装 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

或者通过npm安装：

npm install vue

组件创建

<template>
  <div>
    <img :src="imageSrc" @click="changeImage" alt="Dynamic Image">
    <input type="file" style="display: none" ref="imageInput" @change="uploadImage">
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageSrc: require('../assets/jia.jpg'),
      selectedFile: null
    };
  },
  methods: {
    changeImage() {
      this.$refs.imageInput.click();
    },
    uploadImage(event) {
      const file = event.target.files[0];
      if (file) {
        const reader = new FileReader();
        reader.onload = (e) => {
          this.imageSrc = e.target.result;
          this.selectedFile = file;
        };
        reader.readAsDataURL(file);
      }
    }
  }
};
</script>

样式优化

<style>
img {
  width: 200px;
  height: auto;
  cursor: pointer;
}
input[type="file"] {
  display: none;
}
</style>

总结