Refresh image - observable Angular












1















I use angular 6, firebase and angularfire.



I display my image like that :



import { AngularFireStorage } from 'angularfire2/storage';

@Component({
selector: 'app-geo',
templateUrl: ' <img mat-card-image [src]="profileUrl | async" >

})
export class GeoComponent {


profileUrl: Observable<string | null>;

constructor( private storage: AngularFireStorage)
{
const ref = this.storage.ref('live/live.jpg');
this.profileUrl = ref.getDownloadURL(); }


But my image changes every 30 second but not in my app. I must reload my page to see changement.



Is it normal ?



thank you










share|improve this question





























    1















    I use angular 6, firebase and angularfire.



    I display my image like that :



    import { AngularFireStorage } from 'angularfire2/storage';

    @Component({
    selector: 'app-geo',
    templateUrl: ' <img mat-card-image [src]="profileUrl | async" >

    })
    export class GeoComponent {


    profileUrl: Observable<string | null>;

    constructor( private storage: AngularFireStorage)
    {
    const ref = this.storage.ref('live/live.jpg');
    this.profileUrl = ref.getDownloadURL(); }


    But my image changes every 30 second but not in my app. I must reload my page to see changement.



    Is it normal ?



    thank you










    share|improve this question



























      1












      1








      1








      I use angular 6, firebase and angularfire.



      I display my image like that :



      import { AngularFireStorage } from 'angularfire2/storage';

      @Component({
      selector: 'app-geo',
      templateUrl: ' <img mat-card-image [src]="profileUrl | async" >

      })
      export class GeoComponent {


      profileUrl: Observable<string | null>;

      constructor( private storage: AngularFireStorage)
      {
      const ref = this.storage.ref('live/live.jpg');
      this.profileUrl = ref.getDownloadURL(); }


      But my image changes every 30 second but not in my app. I must reload my page to see changement.



      Is it normal ?



      thank you










      share|improve this question
















      I use angular 6, firebase and angularfire.



      I display my image like that :



      import { AngularFireStorage } from 'angularfire2/storage';

      @Component({
      selector: 'app-geo',
      templateUrl: ' <img mat-card-image [src]="profileUrl | async" >

      })
      export class GeoComponent {


      profileUrl: Observable<string | null>;

      constructor( private storage: AngularFireStorage)
      {
      const ref = this.storage.ref('live/live.jpg');
      this.profileUrl = ref.getDownloadURL(); }


      But my image changes every 30 second but not in my app. I must reload my page to see changement.



      Is it normal ?



      thank you







      angular firebase onchange angularfire






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited Nov 26 '18 at 17:38







      al NTM

















      asked Nov 26 '18 at 15:30









      al NTMal NTM

      878




      878
























          1 Answer
          1






          active

          oldest

          votes


















          1














          If I understand you correctly, you're saying that the file uploaded into storage (at location this.storage.ref('live/live.jpg'); in storage) changes every 30 seconds - as in, someone else is re-uploading a different image overtop the existing file every 30 seconds? And you want that reflected on the end-user's screen? Yes - the fact that you have to reload the page to see the new image is completely normal and expected.



          There's no implementation for subscribing to a file like you've described, not in Firebase anyways. If it's possible for you to accomplish what you need via image carousels, simply downloading all the images you want in one go and then cycling through them, that would definitely be easier for you to accomplish.



          If you really need real-time photo changes you will have to use Firebase's real-time database or Firestore, and subscribe to a set of data - that set of data being the URLs for recently uploaded images. As part of the upload process (or as an automatically triggered cloud function) the finalized URL would be added to the queue/list of URLs. You could then use a package like AngularFire2 to help you subscribe to that queue/list of URLs.






          share|improve this answer
























          • okay. thank you very much for the explanation. I was looking to get my url download firebase from python (script that takes the photos and sends to firebase) but without success ...

            – al NTM
            Nov 26 '18 at 18:11











          Your Answer






          StackExchange.ifUsing("editor", function () {
          StackExchange.using("externalEditor", function () {
          StackExchange.using("snippets", function () {
          StackExchange.snippets.init();
          });
          });
          }, "code-snippets");

          StackExchange.ready(function() {
          var channelOptions = {
          tags: "".split(" "),
          id: "1"
          };
          initTagRenderer("".split(" "), "".split(" "), channelOptions);

          StackExchange.using("externalEditor", function() {
          // Have to fire editor after snippets, if snippets enabled
          if (StackExchange.settings.snippets.snippetsEnabled) {
          StackExchange.using("snippets", function() {
          createEditor();
          });
          }
          else {
          createEditor();
          }
          });

          function createEditor() {
          StackExchange.prepareEditor({
          heartbeatType: 'answer',
          autoActivateHeartbeat: false,
          convertImagesToLinks: true,
          noModals: true,
          showLowRepImageUploadWarning: true,
          reputationToPostImages: 10,
          bindNavPrevention: true,
          postfix: "",
          imageUploader: {
          brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
          contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
          allowUrls: true
          },
          onDemand: true,
          discardSelector: ".discard-answer"
          ,immediatelyShowMarkdownHelp:true
          });


          }
          });














          draft saved

          draft discarded


















          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53484394%2frefresh-image-observable-angular%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown

























          1 Answer
          1






          active

          oldest

          votes








          1 Answer
          1






          active

          oldest

          votes









          active

          oldest

          votes






          active

          oldest

          votes









          1














          If I understand you correctly, you're saying that the file uploaded into storage (at location this.storage.ref('live/live.jpg'); in storage) changes every 30 seconds - as in, someone else is re-uploading a different image overtop the existing file every 30 seconds? And you want that reflected on the end-user's screen? Yes - the fact that you have to reload the page to see the new image is completely normal and expected.



          There's no implementation for subscribing to a file like you've described, not in Firebase anyways. If it's possible for you to accomplish what you need via image carousels, simply downloading all the images you want in one go and then cycling through them, that would definitely be easier for you to accomplish.



          If you really need real-time photo changes you will have to use Firebase's real-time database or Firestore, and subscribe to a set of data - that set of data being the URLs for recently uploaded images. As part of the upload process (or as an automatically triggered cloud function) the finalized URL would be added to the queue/list of URLs. You could then use a package like AngularFire2 to help you subscribe to that queue/list of URLs.






          share|improve this answer
























          • okay. thank you very much for the explanation. I was looking to get my url download firebase from python (script that takes the photos and sends to firebase) but without success ...

            – al NTM
            Nov 26 '18 at 18:11
















          1














          If I understand you correctly, you're saying that the file uploaded into storage (at location this.storage.ref('live/live.jpg'); in storage) changes every 30 seconds - as in, someone else is re-uploading a different image overtop the existing file every 30 seconds? And you want that reflected on the end-user's screen? Yes - the fact that you have to reload the page to see the new image is completely normal and expected.



          There's no implementation for subscribing to a file like you've described, not in Firebase anyways. If it's possible for you to accomplish what you need via image carousels, simply downloading all the images you want in one go and then cycling through them, that would definitely be easier for you to accomplish.



          If you really need real-time photo changes you will have to use Firebase's real-time database or Firestore, and subscribe to a set of data - that set of data being the URLs for recently uploaded images. As part of the upload process (or as an automatically triggered cloud function) the finalized URL would be added to the queue/list of URLs. You could then use a package like AngularFire2 to help you subscribe to that queue/list of URLs.






          share|improve this answer
























          • okay. thank you very much for the explanation. I was looking to get my url download firebase from python (script that takes the photos and sends to firebase) but without success ...

            – al NTM
            Nov 26 '18 at 18:11














          1












          1








          1







          If I understand you correctly, you're saying that the file uploaded into storage (at location this.storage.ref('live/live.jpg'); in storage) changes every 30 seconds - as in, someone else is re-uploading a different image overtop the existing file every 30 seconds? And you want that reflected on the end-user's screen? Yes - the fact that you have to reload the page to see the new image is completely normal and expected.



          There's no implementation for subscribing to a file like you've described, not in Firebase anyways. If it's possible for you to accomplish what you need via image carousels, simply downloading all the images you want in one go and then cycling through them, that would definitely be easier for you to accomplish.



          If you really need real-time photo changes you will have to use Firebase's real-time database or Firestore, and subscribe to a set of data - that set of data being the URLs for recently uploaded images. As part of the upload process (or as an automatically triggered cloud function) the finalized URL would be added to the queue/list of URLs. You could then use a package like AngularFire2 to help you subscribe to that queue/list of URLs.






          share|improve this answer













          If I understand you correctly, you're saying that the file uploaded into storage (at location this.storage.ref('live/live.jpg'); in storage) changes every 30 seconds - as in, someone else is re-uploading a different image overtop the existing file every 30 seconds? And you want that reflected on the end-user's screen? Yes - the fact that you have to reload the page to see the new image is completely normal and expected.



          There's no implementation for subscribing to a file like you've described, not in Firebase anyways. If it's possible for you to accomplish what you need via image carousels, simply downloading all the images you want in one go and then cycling through them, that would definitely be easier for you to accomplish.



          If you really need real-time photo changes you will have to use Firebase's real-time database or Firestore, and subscribe to a set of data - that set of data being the URLs for recently uploaded images. As part of the upload process (or as an automatically triggered cloud function) the finalized URL would be added to the queue/list of URLs. You could then use a package like AngularFire2 to help you subscribe to that queue/list of URLs.







          share|improve this answer












          share|improve this answer



          share|improve this answer










          answered Nov 26 '18 at 18:06









          JeremyWJeremyW

          1,824413




          1,824413













          • okay. thank you very much for the explanation. I was looking to get my url download firebase from python (script that takes the photos and sends to firebase) but without success ...

            – al NTM
            Nov 26 '18 at 18:11



















          • okay. thank you very much for the explanation. I was looking to get my url download firebase from python (script that takes the photos and sends to firebase) but without success ...

            – al NTM
            Nov 26 '18 at 18:11

















          okay. thank you very much for the explanation. I was looking to get my url download firebase from python (script that takes the photos and sends to firebase) but without success ...

          – al NTM
          Nov 26 '18 at 18:11





          okay. thank you very much for the explanation. I was looking to get my url download firebase from python (script that takes the photos and sends to firebase) but without success ...

          – al NTM
          Nov 26 '18 at 18:11




















          draft saved

          draft discarded




















































          Thanks for contributing an answer to Stack Overflow!


          • Please be sure to answer the question. Provide details and share your research!

          But avoid



          • Asking for help, clarification, or responding to other answers.

          • Making statements based on opinion; back them up with references or personal experience.


          To learn more, see our tips on writing great answers.




          draft saved


          draft discarded














          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53484394%2frefresh-image-observable-angular%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown





















































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown

































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown







          Popular posts from this blog

          Lallio

          Unable to find Lightning Node

          Futebolista