我在 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 是一个文件类型变量。有谁知道如何做到这一点?向大家问好!
我正在尝试在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)