url图片上传到firebase有什么特殊的方法吗？

Question

块引用

我正在 Nuxt 和 Vuetify 中构建我的应用程序，我想使用输入 (v-file-input) 将 url 图像上传到 Firebase 和 Axios。 我对名称没有任何问题，但是当我上传 url 图片并且进行 get 调用时，响应只是 url 链接，而不是图片。 那么，上传url张图片有什么特别的方法吗？ 是不是和其他输入法一样简单？

提前致谢。

            <template>
       <div>
         <v-app>
         <v-container>
         <h2>Movies</h2>
           <ul>
               <li v-for="movi in moviesData" :key="movi.id">
                        {{movi.name}}
                        {{movi.director}}
                        {{movi.image}}
                  </li>
           </ul>
           </v-container>
           </v-app>
       </div>

       </template>

        <script>
        import axios from 'axios'
        export default {
          data() {
            return {
                moviesData: [],
             }
          },
          methods:{
            getMovies(){
              axios.get('https://proyecto-final-cf888-default- 
     rtdb.firebaseio.com/' + 'movies.json')
                .then( (res)=>{
                  let results=[];
                  console.log(res);
                  for (let id in res.data){
                    console.log(id);
                    console.log(res.data[id]);
                    results.push({
                       id: id, 
                       name: res.data[id].name,
                       director: res.data[id].director,
                       image: res.data[id].image,
                    });
                  }
                  this.moviesData= results;
                  })
                .catch((error)=>{
                  console.log(error) 
                })       
               }
             }, 
            created(){
              this.getMovies();
            }
        }; 
        </script>

        

Answer 1

在 Firestore 中存储 URL 不会存储引用的图像本身。

1. 您可以将图像上传到 Storage 并在 Firestore 中引用它。
2. 或者您将 URL 存储在 Firestore 中并在您的应用程序中发起 HTTP-GET 请求以从 web 加载图像。

笔记：

Firestore 将单个文档限制为 1MB。 许多图像比那个大。

存储还提供自动缩放上传图像等功能。

Answer 2

这是方法：

        <li v-for="movi in moviesData" :key="movi.id">
                    {{movi.name}}
                    {{movi.director}}
         <v-img :src='movi.image'></v-img>
              </li>

难以置信的简单。

谢谢大家！