Is there a special way to upload url images to firebase?

Question

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>

Have you checked [Upload image from URL to Firebase Storage](https://stackoverflow.com/a/63174282/13130697)? — Dharmaraj, May 06 '22 at 15:42
"Questions seeking debugging help ('**why isn't this code working?**') must include the desired behavior, a *specific problem or error* and *the shortest code necessary* to reproduce it **in the question itself**. Questions without **a clear problem statement** are not useful to other readers. See: [How to create a Minimal, Complete, and Verifiable example.](http://stackoverflow.com/help/mcve)" — Frank van Puffelen, May 06 '22 at 15:43
Dharmaraj Yes but it does not work for me because I do need to use input — Elisaniza, May 06 '22 at 15:59
@Elisaniza There is no such a thing like URL image. There can be like PNG Image or JPG image, but never URL image. Person who answered you get caught and didn't understand well what you want to do. — Mises, May 06 '22 at 16:58
@Elisaniza Dharmaraj sent you a link where you can fetch whole image from other external URL and upload it to firebase Storage. No one mention there about any inputs, so you don't need to use input! All you need is URL from where you can upload a file. — Mises, May 06 '22 at 17:03
Ok Mises, I'll translate it next time, but in this case my question was more like a general one — Elisaniza, May 06 '22 at 17:42

score 1 · Accepted Answer · answered May 06 '22 at 16:34

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

You might upload the image to Storage and a reference it in Firestore.
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.

score 0 · Answer 2 · answered May 06 '22 at 20:38

0

This was the way:

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

Incredibly simple.

Thanks everyone!

answered May 06 '22 at 20:38

Elisaniza

67
6

Is there a special way to upload url images to firebase?

2 Answers2