英文:
Nuxt 3 image src binding
问题
我正在尝试使用Nuxt3来渲染头像图片。
到目前为止，我有以下代码：
<template>
...
<img :src="avatarUrl.value"/>
...
</template>
<script setup>
const avatarUrl = ref('')
const {data: {user: currentUser}} = await supabase.auth.getUser()
onMounted(async () => {
if (currentUser) {
let {data, error} = await supabase.from('Profiles').select('avatar_url').eq('user_id', currentUser.id).single()
// 输出正确的URL，例如：
// https://lh3.googleusercontent.com/a/[...]fsV4=s96-c
console.log(data.avatar_url)
if (!error) avatarUrl.value = data.avatar_url
}
})
</script>
但是图片不会显示出来。
渲染的HTML是 <img data-v-inspector="components/Header.vue:55:15">，所以它甚至没有src属性。
如何使用从数据库接收到的src动态渲染图片？
英文:
I am trying to render an avatar image using Nuxt3.
So far I have
<template>
...
<img :src="avatarUrl.value"/>
...
</template>
<script setup>
const avatarUrl = ref('')
const {data: {user: currentUser}} = await supabase.auth.getUser()
onMounted(async () => {
if (currentUser) {
let {data, error} = await supabase.from('Profiles').select('avatar_url').eq('user_id', currentUser.id).single()
// Logs the correct url. eg:
// https://lh3.googleusercontent.com/a/[...]fsV4=s96-c
console.log(data.avatar_url)
if (!error) avatarUrl.value = data.avatar_url
}
})
</script>
But the image won't display.
The rendered html is <img data-v-inspector="components/Header.vue:55:15">, so it doesn't even have a src.
How to dynamically render the img using the src received from the db?
答案1
得分: 1
我找到了解决方法。我必须使用<img :src="avatarUrl"/>。
英文:
I've found the fix. I had to use <img :src="avatarUrl"/>.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论