I'm trying to displaying images dynamically but unfortunately I've been unsuccessful.
Here's my current html code:
<article class="panel panel-default">
<div class="panel-body">
{{ content.file }}
</div>
<img [src]="content.file" class="img-thumbnail" alt="Can't Display Image" width="304" height="236">
<footer class="panel-footer">
<div class="author">
{{ content.username }}
</div>
<div class="config" *ngIf="belongsToUser()">
<a (click)="onEdit()">Edit</a>
<a (click)="onDelete()">Delete</a>
</div>
</footer>
</article>
Here's what I get when I use [src]=content.file
However, I double checked that content.file has the correct relative path to the image as evident by my console.
When I hardcode the link using: <img src="../../../uploads/file-1491707047047.jpg" class="img-thumbnail" alt="Can't Display Image" width="304" height="236"> instead, I get the image to display (which I literally copied from the console content.file field).
Any idea what could be causing the problem? Thanks!
Maybe the view is not updated when you are setting the value to content.file. where you set content try changedetectionref
Related
I need to link this image in my website to another url but I cannot figure it out. I tried to use an <a> tag but when it deployed, I would click on the link and it still wouldn't redirect me. I'll attach the code below:
<div class="portfolio-item padd-15">
<div class="portfolio-item-inner shadow-dark">
<div class="portfolio-img">
<img src="images/CGS Official Logo 500 × 360 px.png" alt="">
</div>
</div>
</div>
putting the img inside an anchor tag<a> <img> </a>
img {
width: 150px
}
<div class="portfolio-item padd-15">
<div class="portfolio-item-inner shadow-dark">
<div class="portfolio-img">
<a href="https://stackoverflow.com/">
<img src="https://images.unsplash.com/photo-1663668244836-68998f4e9151?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyfHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=500&q=60" alt="">
</a>
</div>
</div>
</div>
To add a link to your img tag surround it with your anchor tags.
See this snippet:
<div class="portfolio-item padd-15">
<div class="portfolio-item-inner shadow-dark">
<div class="portfolio-img">
<a href="https://google.com">
<img src="images/CGS Official Logo 500 × 360 px.png" alt="image">
</a>
</div>
</div>
</div>
I've added alt text so you can see the URL functioning as intended.
W3schools tag
Angular 6: Images takes time to load in chrome
This issue is specifically in chrome and not in any other browser.
We have used Firebase in our project, and used snapshotchange method to fetch the image to angular project from the same, the image urls are like this https://firebasestorage.googleapis.com/v0/b/test-4a5d9.appspot.com/o/download.jpg?alt=media&token=a78321fc-eb9c-496a-a690-e8b2ccddf6c6 . There is something wrong due to which, image loads very slowly and the screen becomes blank when we scroll up and down in the browser, here we have used "ngx-infinite-scroll".
I have also tried by concatenating .jpg extension after the image but the scenario remains the same.
First, I thought the problem is with the size of image which is affecting the loading speed, so then I have replaced the images with https://upload.wikimedia.org/wikipedia/commons/b/b9/Pizigani_1367_Chart_1MB.jpg which is a heavy size of image, but here the website run's smoothly without any issue.
But it does not scroll smoothly when image urls are like this https://firebasestorage.googleapis.com/v0/b/test-4a5d9.appspot.com/o/download.jpg?alt=media&token=a78321fc-eb9c-496a-a690-e8b2ccddf6c6
Here is the code to set images in one list item:
<div class="slider">
<div class="slideshow-container" id="{{works.id}}_" *ngIf="works.media">
<div class="imgSlides imgsss active" *ngIf="works.media.aFront != undefined">
<div class="content">
<div>
<img src="{{works.media.aFront}}" alt="front img" />
</div>
</div>
</div>
<div class="imgSlides imgsss" *ngIf="works.media.bBack != undefined">
<div class="content">
<div>
<img src="{{works.media.bBack}}" alt="back img" />
</div>
</div>
</div>
<div class="imgSlides imgsss" *ngIf="works.media.cLeft != undefined">
<div class="content">
<div>
<img src="{{works.media.cLeft}}" alt="left img" />
</div>
</div>
</div>
<div class="imgSlides imgsss" *ngIf="works.media.dRight != undefined">
<div class="content">
<div>
<img src="{{works.media.dRight}}" alt="right img" />
</div>
</div>
</div>
<div class="imgSlides imgsss" *ngIf="works.media.ePanoroma != undefined">
<div class="content">
<div>
<img src="{{works.media.ePanoroma}}" alt="panoroma img" />
</div>
</div>
</div>
<div class="imgSlides imgsss" *ngIf="works.media.fDetail != undefined">
<div class="content">
<div>
<img src="{{works.media.fDetail}}" alt="detail img" />
</div>
</div>
</div>
<!-- arrow -->
<div *ngIf="works.imageCount>1">
<a class="next arrow-control" (click)="plusSlide(1,works.id + '_')"> <img src="assets/image/backward.png" alt="previous arrow" /> </a>
<a class="prev arrow-control" (click)="plusSlide(-1,works.id + '_')"> <img src="assets/image/forward.png" alt="next arrow" /> </a>
</div>
<p class="sold-btn" *ngIf="works.isSold">{{'Sold'}}</p>
</div>
<div class="slideshow-container" *ngIf="isEmptyObject(works.media)">
<div class="content">
<div [ngStyle]="{'background-image': 'url(' + defaultimg + ')'}" class="img-thumb"></div>
</div>
</div>
<div style="text-align:center;display:none;" class="bullets">
</div>
</div>
Here is the video of the problem:
https://drive.google.com/file/d/1Ipl-34rOE2ZcscF3jrPYw2C9WfgnA29U/view?usp=sharing
Do the images need to be private?
You don't have any caching enabled on your images.
If you check the headers for the image they have Cache-Control: private.
Since the browser isn't allowed to cache the images, it might affect the performance quite a bit.
Potential fix
I would suggest allowing the user to cache the images for at least an hour.
You will need to set the correct cache headers when uploading the images.
But you can easily via googles gsutil set the headers for all files in a folder
This is what I use:
Where in this case we cache the images for 1year and make them immutable causing the browser to always use the cached version
gsutil -m setmeta -h "Cache-Control:public,max-age=31536000,immutable" 'gs://my-storage-bucket-name/myimagefolder/**/*.{jpg,png}'
Hopefully this could make the app more performant, but you will have to try to know.
I have image buttons that change appearance on hover by changing the content of the image in CSS. Not sure if that is part of the problem but for some reason when I click on my image link nothing happens.
Here's the code I am using:
<div class="hub-background">
<div class="hub-container">
<article class="btn-twitch">
<a href="twitch.tv/destifly">;
<img src=" ***** "> </a>
</article>
</div>
</div>
You need to put the article inside of the anchor tag
<div class="hub-background">
<div class="hub-container">
<a href="...">
<article class="btn-twitch">
<img src="...">
</article>
</a>
</div>
</div>
Hello so I have a simple html code and this is the output:
While the code is
<img class="img-responsive" style="float:left;width:400px;height:700px;" src="../assets/images/san_jacinto.jpg">
<h3>Founding of the town</h3>
<p>Some text here/p>
Now I've managed to do it using bootstrap 2.3.1 media and now I got another problem:
What I need to fix now is the text should continue below the image. Is that possible in bootstrap also? Or if not, what else can I do?
you can use bootstrap Media object :
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="..." alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
...
</div>
</div>
The solution is pleasingly easy, try placing your P and h3 tags inside a parent dive,assign a css class to it, and add paddings to that css class. check it out here:
padding
You can add some right-margin to image or
Left-padding to paragraph or
text-indent to paragraph.
Why don't you put the image inside a col-md-4 and the text inside col-md-8?
<div class="container">
<div class="col-md-4">
<img class="img-responsive" src="../assets/images/san_jacinto.jpg">
</div>
<div class="col-md-8">
<h3>Founding of the town</h3>
<p>Some text here/p>
</div>
</div>
I'm trying to load the bootstrap media object inside a span3 div.
Everything works, apart from the image. I've checked this link elsewhere and it has no issues.
Any suggestions
<div class="container">
<div class="row">
<div class="span3">
<div class="pull-left">
<h3>Top Devices</h3>
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" data-src="<?php echo base_url(); ?>resource/img/devices/Asus-Nexus-7.png"/>
</a>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
</div>
</div>
</div>
</div>
If it's just a regular image you are loading into the span3, is there a reason why you are using data-src and not src ?
Or if you are also using something like foresight.js, for example, see if this post helps you
Good luck!
Check the source code out, probably it will gives you the answer.
I think you should add an slash:
data-src="/resource/img/devices/Asus-Nexus-7.png
instead of:
data-src="resource/img/devices/Asus-Nexus-7.png
Grretings