Refresh image - observable Angular
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
add a comment |
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
add a comment |
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
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
angular firebase onchange angularfire
edited Nov 26 '18 at 17:38
al NTM
asked Nov 26 '18 at 15:30
al NTMal NTM
878
878
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
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.
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
add a comment |
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
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
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.
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
add a comment |
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.
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
add a comment |
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.
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.
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
add a comment |
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
add a comment |
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.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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