Angular 2 - Images not showing on safari
My question is about image tag on safari browser.
I have code in angular 2 for displaying images on the page
<div class="col-md-4 col-xs-12 col-sm-4 col-lg-4" *ngFor="let i of incident.images" >
<div class="image-tab">
<img [src]="i && i.url != 'null' ? i.url : ''" alt="img" >
</div>
</div>
It works well with other browsers but not on Safari.
On Safari browser it just shows the string img which is alt attribute.
The point is that other images show up.
<label><img *ngIf="incident.status" [src]="'assets/img/status/' + incident.status + '.png'" alt="" style="height: 20px;">  {{incident.status || 'N/a'}} </label>
for example above code just works fine in the same file.
Right now I am think may be it's issue with inside *ngFor but not sure.
Hope anyone can help me on this tricky thing!
Thank you.
angular image safari
asked Nov 12 at 12:26
King of Delta Force
63
add a comment |
My question is about image tag on safari browser.
I have code in angular 2 for displaying images on the page
<div class="col-md-4 col-xs-12 col-sm-4 col-lg-4" *ngFor="let i of incident.images" >
<div class="image-tab">
<img [src]="i && i.url != 'null' ? i.url : ''" alt="img" >
</div>
</div>
It works well with other browsers but not on Safari.
On Safari browser it just shows the string img which is alt attribute.
The point is that other images show up.
<label><img *ngIf="incident.status" [src]="'assets/img/status/' + incident.status + '.png'" alt="" style="height: 20px;">  {{incident.status || 'N/a'}} </label>
for example above code just works fine in the same file.
Right now I am think may be it's issue with inside *ngFor but not sure.
Hope anyone can help me on this tricky thing!
Thank you.
angular image safari
asked Nov 12 at 12:26
King of Delta Force
63
null should not be single quotes
– Soumya B. Athani
Nov 12 at 12:28
add a comment |
My question is about image tag on safari browser.
I have code in angular 2 for displaying images on the page
<div class="col-md-4 col-xs-12 col-sm-4 col-lg-4" *ngFor="let i of incident.images" >
<div class="image-tab">
<img [src]="i && i.url != 'null' ? i.url : ''" alt="img" >
</div>
</div>
It works well with other browsers but not on Safari.
On Safari browser it just shows the string img which is alt attribute.
The point is that other images show up.
<label><img *ngIf="incident.status" [src]="'assets/img/status/' + incident.status + '.png'" alt="" style="height: 20px;">  {{incident.status || 'N/a'}} </label>
for example above code just works fine in the same file.
Right now I am think may be it's issue with inside *ngFor but not sure.
Hope anyone can help me on this tricky thing!
Thank you.
angular image safari
asked Nov 12 at 12:26
King of Delta Force
63
My question is about image tag on safari browser.
I have code in angular 2 for displaying images on the page
<div class="col-md-4 col-xs-12 col-sm-4 col-lg-4" *ngFor="let i of incident.images" >
<div class="image-tab">
<img [src]="i && i.url != 'null' ? i.url : ''" alt="img" >
</div>
</div>
It works well with other browsers but not on Safari.
On Safari browser it just shows the string img which is alt attribute.
The point is that other images show up.
<label><img *ngIf="incident.status" [src]="'assets/img/status/' + incident.status + '.png'" alt="" style="height: 20px;">  {{incident.status || 'N/a'}} </label>
for example above code just works fine in the same file.
Right now I am think may be it's issue with inside *ngFor but not sure.
Hope anyone can help me on this tricky thing!
Thank you.
angular image safari
angular image safari
asked Nov 12 at 12:26
King of Delta Force
63
asked Nov 12 at 12:26
King of Delta Force
63
asked Nov 12 at 12:26
King of Delta Force
63
asked Nov 12 at 12:26
King of Delta Force
63
asked Nov 12 at 12:26
King of Delta Force
63
63
null should not be single quotes
– Soumya B. Athani
Nov 12 at 12:28
add a comment |
null should not be single quotes
– Soumya B. Athani
Nov 12 at 12:28
null should not be single quotes
– Soumya B. Athani
Nov 12 at 12:28
null should not be single quotes
– Soumya B. Athani
Nov 12 at 12:28
add a comment |
2 Answers
2
active
oldest
votes
Try surrounding your statement in brackets (i && i.url != 'null') ? i.url : '' . Also depending on your value if null is not supposed to be hard coded string, leave out quotes.
answered Nov 12 at 13:21
Slobodan Gajić
104110
add a comment |
Thank you for your answer, Slobodan.
After days of researching I found the issue.
Actually it was not an issue on Angular but just https / http issue.
The image url saved on backend was http:// while the site was running on https://
It's strange that other browsers (google chrome and firefox) works fine with fetching http images from https but safari was strict.
Hope this would help you later!
Also those parentheses greatly helped me on other page. :)
Thank you again.
answered Nov 15 at 10:47
King of Delta Force
63
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%2f53262193%2fangular-2-images-not-showing-on-safari%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
Try surrounding your statement in brackets (i && i.url != 'null') ? i.url : '' . Also depending on your value if null is not supposed to be hard coded string, leave out quotes.
answered Nov 12 at 13:21
Slobodan Gajić
104110
add a comment |
Try surrounding your statement in brackets (i && i.url != 'null') ? i.url : '' . Also depending on your value if null is not supposed to be hard coded string, leave out quotes.
answered Nov 12 at 13:21
Slobodan Gajić
104110
add a comment |
Try surrounding your statement in brackets (i && i.url != 'null') ? i.url : '' . Also depending on your value if null is not supposed to be hard coded string, leave out quotes.
answered Nov 12 at 13:21
Slobodan Gajić
104110
Try surrounding your statement in brackets (i && i.url != 'null') ? i.url : '' . Also depending on your value if null is not supposed to be hard coded string, leave out quotes.
answered Nov 12 at 13:21
Slobodan Gajić
104110
edited Nov 12 at 13:49
answered Nov 12 at 13:21
Slobodan Gajić
104110
answered Nov 12 at 13:21
Slobodan Gajić
104110
answered Nov 12 at 13:21
Slobodan Gajić
104110
104110
add a comment |
add a comment |
Thank you for your answer, Slobodan.
After days of researching I found the issue.
Actually it was not an issue on Angular but just https / http issue.
The image url saved on backend was http:// while the site was running on https://
It's strange that other browsers (google chrome and firefox) works fine with fetching http images from https but safari was strict.
Hope this would help you later!
Also those parentheses greatly helped me on other page. :)
Thank you again.
answered Nov 15 at 10:47
King of Delta Force
63
add a comment |
Thank you for your answer, Slobodan.
After days of researching I found the issue.
Actually it was not an issue on Angular but just https / http issue.
The image url saved on backend was http:// while the site was running on https://
It's strange that other browsers (google chrome and firefox) works fine with fetching http images from https but safari was strict.
Hope this would help you later!
Also those parentheses greatly helped me on other page. :)
Thank you again.
answered Nov 15 at 10:47
King of Delta Force
63
add a comment |
Thank you for your answer, Slobodan.
After days of researching I found the issue.
Actually it was not an issue on Angular but just https / http issue.
The image url saved on backend was http:// while the site was running on https://
It's strange that other browsers (google chrome and firefox) works fine with fetching http images from https but safari was strict.
Hope this would help you later!
Also those parentheses greatly helped me on other page. :)
Thank you again.
answered Nov 15 at 10:47
King of Delta Force
63
Thank you for your answer, Slobodan.
After days of researching I found the issue.
Actually it was not an issue on Angular but just https / http issue.
The image url saved on backend was http:// while the site was running on https://
It's strange that other browsers (google chrome and firefox) works fine with fetching http images from https but safari was strict.
Hope this would help you later!
Also those parentheses greatly helped me on other page. :)
Thank you again.
answered Nov 15 at 10:47
King of Delta Force
63
answered Nov 15 at 10:47
King of Delta Force
63
answered Nov 15 at 10:47
King of Delta Force
63
answered Nov 15 at 10:47
King of Delta Force
63
63
add a comment |
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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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%2f53262193%2fangular-2-images-not-showing-on-safari%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
null should not be single quotes
– Soumya B. Athani
Nov 12 at 12:28