小编all*_*uck的帖子

如何将 File 对象渲染为 HTML 元素(使用 Vue.js)

我在 HTML 元素中渲染图像时遇到一些问题。我认为对于经验丰富的前端开发人员来说,解决方案可能很简单。我有一个 Vuetify 组件,可让用户输入个人资料图像:

<v-form>
   <v-avatar size="144">
       <v-icon hidden ref="default_icon" size="144">account_circle</v-icon>
       <img ref="my_img" style="display: none;" :src="my_photo.name">
       <v-btn @click="$refs.my_input.click()" class="img_btn" absolute right small fab dark color="pink">
           <v-icon dark>add</v-icon>
       </v-btn>
       <input ref="my_input" hidden type="file" accept="image/*" @change="onFileChange($refs.my_input)">
   </v-avatar>
</v-form>
Run Code Online (Sandbox Code Playgroud)

当元素调用 onFileChange 时,它​​将 HTML 元素传递给该函数。

onFileChange(event) {
    this.my_photo = event.files[0]
    console.log(this.my_photo)
    this.$refs.default_icon.style.display = "none"
    this.$refs.my_img.style.display = "inline"
}
Run Code Online (Sandbox Code Playgroud)

所以现在该函数用 img 标签替换图标。我想用用户输入的图像填充图像标签。this.my_photo 是一个文件类型变量。有谁知道如何做到这一点?向大家问好!

html javascript vue.js

3
推荐指数
1
解决办法
8900
查看次数

GoogleAuthProvider在Web应用程序中给出错误“ this.ta不是函数”

我正在尝试在Web应用程序中设置Google身份验证。我在Android应用程序上做了几次这种事情,但是现在当我加载我的应用程序时,出现错误“ this.ta不是函数”。也许它有些愚蠢,但我无法发现问题。这是我所拥有的:

api.js

import { db, storage, auth, google_provider } from './firebase'
sign_in() {
    auth.signInWithPopup(google_provider).then(result => {
        var token = result.credential.accessToken;
        var user = result.user;
    }).catch(error => {
        var errorCode = error.code;
        var errorMessage = error.message;
        var email = error.email;
        var credential = error.credential;
    })
}
Run Code Online (Sandbox Code Playgroud)

firebase.js

import * as firebase from 'firebase';
const app = firebase.initializeApp({
    apiKey: "my-key",
    authDomain: "domain",
    databaseURL: "https://domain-url",
    projectId: "name",
    storageBucket: "bucket",
    messagingSenderId: "id"
})

export const db = app.firestore()
export const storage = app.storage().ref() …
Run Code Online (Sandbox Code Playgroud)

javascript google-authentication firebase

2
推荐指数
1
解决办法
825
查看次数