Blockquote

I'm building my app in Nuxt and Vuetify and I want to upload url images to Firebase with Axios using inputs (v-file-input). I have no problems with names but when I upload an url image and when I make the get call the response is just the url link, not the picture. So, is there any particular way to upload url pictures? Is not as simple as any other input?

Thanks in advance.

            <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>

        

CodePudding user response：

Storing an URL in Firestore will not store the referenced image itself.

1. You might upload the image to Storage and a reference it in Firestore.
2. Or you store the URL in Firestore and initiate a HTTP-GET request in your app to load the image from the web.

Note:

Firestore limits a single document to 1MB. Many images are larger than that.

Storage also offer functions to scale uploaded images automatically etc.