I have the following HTML code, but when I try to view the page the images aren't showing, can tell me why this is? The image paths are correct.
<div class="content container_16">
<div id="sidebar" class="grid_4 alpha">
<div class="widget cats">
<div class="w-title"><?php echo $lbl_categories; ?></div>
<ul>
<?php wp_list_cats("sort_order=name&exclude=1&hide_empty=0"); ?>
</ul>
</div>
</div>
<div id="main-body" class="grid_12 omega">
<div id="ad-top" class="grid_12">
<img src="<?php bloginfo("template_url"); ?>/images/content-top.png" alt="Some text"/>
<img src="<?php bloginfo("template_url"); ?>/images/logo.png" alt="Logo">
</div>
<div>
<p>some text follows here</p>
</div>
</div>
While in Firebug the total div (ad-top) looks like dimmed.
Small update: When I remove the id from the div, its showing back - strange.
If you are using LINUX, make sure that you have read/write access to the images folder.
Also ensure that your images URL are correct.
Related
Laravel doesn't show image with copied URL. I tried everything and i also tried reading stackoverflow questions about this but nothing helped.
#extends('layouts.app')
#section('content')
<div class="container">
<div class="row">
<div class="col-3">
<p>Test</p>
<img src="https://scontent-ams2-1.cdninstagram.com/v/t51.2885-19/97566921_2973768799380412_5562195854791540736_n.jpg?stp=dst-jpg_s320x320&_nc_ht=scontent-ams2-1.cdninstagram.com&_nc_cat=104&_nc_ohc=K6wOdgtL1C4AX8vXQK-&edm=ABfd0MgBAAAA&ccb=7-5&oh=00_AT-CZthKcVgpzi71lCY9fRYyPC8kf4yq5ecZ_zeV5pG6dw&oe=62C1C25F&_nc_sid=7bff83" alt="image" height=200 width=200>
</div>
<div class="col-9">
</div>
</div>
#endsection
The image shows when i open it in browser (https://scontent-ams2-1.cdninstagram.com/v/t51.2885-19/97566921_2973768799380412_5562195854791540736_n.jpg?stp=dst-jpg_s320x320&_nc_ht=scontent-ams2-1.cdninstagram.com&_nc_cat=104&_nc_ohc=K6wOdgtL1C4AX8vXQK-&edm=ABfd0MgBAAAA&ccb=7-5&oh=00_AT-CZthKcVgpzi71lCY9fRYyPC8kf4yq5ecZ_zeV5pG6dw&oe=62C1C25F&_nc_sid=7bff83)
But it doens't show on the website. This is home.blade.php
Try to call image link with http not https like that :
<img src="http://scontent-ams2-1.cdninstagram.com/v/t51.2885-19/97566921_2973768799380412_5562195854791540736_n.jpg?stp=dst-jpg_s320x320&_nc_ht=scontent-ams2-1.cdninstagram.com&_nc_cat=104&_nc_ohc=K6wOdgtL1C4AX8vXQK-&edm=ABfd0MgBAAAA&ccb=7-5&oh=00_AT-CZthKcVgpzi71lCY9fRYyPC8kf4yq5ecZ_zeV5pG6dw&oe=62C1C25F&_nc_sid=7bff83" alt="image" height=200 width=200>
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 am brand new to coding and have not been able to determine why two seemingly identical pieces of code do not work the same. This exercise involves simply making a picture appear on a web page. Easy enough, but I do not see why the same code only works one out of two times.
This code works:
<div class="col-sm-6">
<div class="well text-center">
<div>
img class="img-responsive" src="http://pre10.deviantart.net/1d23/th/pre/i/2013/070/1/e/grumpy_cat_by_bwcopy-d5xod2v.jpg"
</div>
While this code does not:
<div class="col-sm-6">
<div class="well text-center">
<div>
img class="img-responsive" src="https://img.buzzfeed.com/buzzfeed-static/static/2015-04/21/16/enhanced/webdr05/enhanced-31550-1429646952-7.jpg"
</div>
I checked the source for the non-working photo and it is valid. (Check it yourself if you like ultra-cute puppies).
What am I not seeing? (besides the puppy picture, obviously).
Thanks.
You are not using the img tag, you are just writing plain text.
Change to this (notice the brackets):
<img class="img-responsive" src="http://pre10.deviantart.net/1d23/th/pre/i/2013/070/1/e/grumpy_cat_by_bwcopy-d5xod2v.jpg" />
First and 2nd code snippets look the same, no reason either of them should work.
try this
<div class="col-sm-6">
<div class="well text-center">
<div>
<img class="img-responsive" src="http://pre10.deviantart.net/1d23/th/pre/i/2013/070/1/e/grumpy_cat_by_bwcopy-d5xod2v.jpg">
</div>
or this:
<div class="col-sm-6">
<div class="well text-center">
<div>
<img class="img-responsive" src="https://img.buzzfeed.com/buzzfeed-static/static/2015-04/21/16/enhanced/webdr05/enhanced-31550-1429646952-7.jpg">
</div>
I coded up my website with html and css in Dreamweaver. When I open the html documents locally on my computer, the images all load (everywhere, including on the Art/Design page). When I uploaded all of the files to AWS, only three out of the sixteen gallery images loaded (the 7th, 8th, and 9th). For each of the gallery divs, including the images in them, the code is identical. When opened in chrome, developer tools show the images which didn't load cannot be found (404 error). The images do not load through the direct url or my domain. Other images outside of the gallery loaded fine.
Here is the html:
<section id="full-width">
<div class="title2">
<p>Fine Art</p>
</div>
<section id="pictures">
<div class="column">
<div class="gallery">
<img src="Images/Gallery/1.jpg" alt="" class="gallery-image">
<div class="title4">
<h>Study of the Eye</h>
<h1>2016</h1>
<p>Graphite on paper.</p>
</div>
</div>
<div class="gallery">
<img src="Images/Gallery/2.jpg" alt="" class="gallery-image">
<div class="title4">
<h>Study of the Iris</h>
<h1>2016</h1>
<p>Hard pastel on paper</p>
</div>
</div>
... <!--skipping a few elements-->
<!-- The following three images load without fail-->
<img src="Images/Gallery/9.jpg" alt="" class="gallery-image">
<div class="title4">
<h>Fahrenheit 451 Alternate Cover</h>
<h1>2013</h1>
<p>Spray paint on newspaper on canvas</p>
</div>
</div>
</div>
<div class="column">
<div class="gallery">
<img src="Images/Gallery/12.jpg" alt="" class="gallery-image">
<div class="title4">
<h>Glint</h>
<h1>2015</h1>
<p>Acrylic on illustration board</p>
</div>
</div>
<div class="gallery">
<img src="Images/Gallery/10.jpg" alt="" class="gallery-image">
<div class="title4">
<h>Impressionist Self-Portrait</h>
<h1>2015</h1>
<p>Soft-pastel on illustration board.</p>
</div>
</div>
<!-- the following, again, do not load -->
<div class="gallery">
<img src="Images/Gallery/8.jpg" alt="" class="gallery-image">
<div class="title4">
<h>Self-Portrait: Creation</h>
<h1>2016</h1>
<p>Graphite on paper</p>
</div>
</div>
... <!-- skipping more elements -->
</div>
</div>
</div>
I don't understand how some images can load and others cannot. The images which load are not the smallest sized images of the group, and neither is there anything which sets them apart.
Bonus question: why can't my error.html page load the stylesheets? (Again, Chrome claims 404 error, cannot be found)?
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