无法使用 vuejs 添加用户照片答案

【问题标题】：can't add user photo with vuejs无法使用 vuejs 添加用户照片
【发布时间】：2020-07-08 01:21:23
【问题描述】：

我已经为我的项目构建了一个配置文件组件（laravel+vuejs）当我尝试在她的位置显示用户照片时，它没有显示我尝试了很多方法，但没有解决方案。当我检查数据库时，我找到了但有一个问题，我可以找到它..任何帮助家伙？这个代码属于我想如何播种用户照片：

       <div class="row">
      <div class="col-md-3"  v-for="user in users"  v-if=" user.id == key "  :key="user.id">


        <!-- Profile Image -->
        <div class="card card-primary card-outline"  >
          <div class="card-body box-profile">
            <div class="text-center">
              <img class="profile-user-img img-fluid img-circle" :src="getProfilePhoto()" 
               alt="User profile picture" >
            </div>

这是主要脚本：

<div class="form-group row">
                                <label for="photo" class="col-sm-3 col-form-label">Profile Picture</label>
                          <div class="col-sm-10">
                                    <input type="file"  name="photo"  @change="updateProfile" class="form-input">
                                </div>

                            </div>

                  <div class="form-group row">
                    <div class="col-sm-10">
                      <button   @click.prevent="updateInfo"  type="submit" class="btn btn-danger">Submit</button>
                    </div>
                  </div>
                </form></div>
              </div>
              <!-- /.tab-pane -->
            </div>
            <!-- /.tab-content -->
          </div><!-- /.card-body -->
        </div>
        <!-- /.nav-tabs-custom -->
      </div>
      <!-- /.col -->
    </div>
    <!-- /.row -->
  <!-- /.container-fluid -->
   <!-- /.content -->
         </div>

          </div>
       </div>
    </div>


  </template>

    <script>
export default {
    data(){
     return{
    form : new Form({
    location:'',
    eucation:'',
    photo:'',
    skills:'',
    email:'',
    password:''

   }),

         key : this.$route.params.id,
          users:[],
            roles:{},
            role:{
                id:'',
              role:''
            },
            user:{

            },

     }
    },
    methods:{
          afficherMembre(){
               axios.get('/api/membre').then(({ data }) =>(this.users = data.data));
          },
         getProfilePhoto(){

            let photo = (this.form.photo.length > 200) ? this.form.photo : "/img/profile/"+ 
        this.form.photo ;
            return photo;
        },

        updateInfo(){
        this.form.put('/api/profile')
            .then(()=>{
                this.form.reset();                 })
            .catch(() => {
                               });
        },
        updateProfile(e){
            let file = e.target.files[0];
            let reader = new FileReader();

            let limit = 1024 * 1024 * 2;
            if(file['size'] > limit){
                swal({
                    type: 'error',
                    title: 'Oops...',
                    text: 'You are uploading a large file',
                })
                return false;
            }

            reader.onloadend = (file) => {
                this.form.photo = reader.result;
            }
            reader.readAsDataURL(file);
        },
        afficherProjet(){
        axios.get("/api/getProjectsUserConnecte").then(({ data }) => (this.projets = data));
        },
    },


created(){
   this.afficherMembre();
},
    mounted() {
        console.log('Component mounted.')
    }


  }

【问题讨论】：

标签： laravel vue.js laravel-5 vuejs2 vue-component

【解决方案1】：

使用 require

加载照片

<img class="profile-user-img img-fluid img-circle" :src="require(getProfilePhoto)"  alt="User profile picture" >

如果要使用根目录，请在路径中添加“@”。示例：'@/assets/images/example.jpg'

这里你有另一个线程在谈论： How to import and use image in a Vue single file component?

【讨论】：