无法使用 vuejs 添加用户照片

Posted 2023-02-16

【中文标题】无法使用 vuejs 添加用户照片

【英文标题】：can't add user photo with 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()" 
                >
            </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.')
    


  

【参考方案1】：

使用 require

加载照片

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

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

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