I am facing an amazing problem that my html program loads images from web but not from local hard drive. I tried alot by changing path and folder but still the issue is same.
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<figure>
<img src="/images/img.jpg"
alt="Ghoomo Phiro Pakistan Adventure Club">
</figure>
<div class="caption">
EveryThing goes there
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<a href="#" class="thumbnail">
<img src="https://www.google.com/images/srpr/logo3w.png"
alt="Ghoomo Phiro Pakistan Adventure Club">
</a>
<div class="caption">
EveryThing goes there
</div>
</div>
</div>
Why does this work:
<img class="img-thumbnail img-responsive"
src="http://upload.wikimedia.org/wikipedia/sr/0/0c/Firefox-logo.png"
alt="" />
But not local images:
<img class="img-thumbnail img-responsive"
src="http://localhost/live/images/logo.png"
alt="" />
If you use src="/images/fileName" then the browser looks for images folder in the root directory. If images folder is in the same working directory then it won't work. You must have to replace it with either ./images/fileName or images/fileName
Check to see if your image is in one directory, and your css file in another. If this is the case, your css file will not be able to access the image without first going up the in the directory like so:
<img src="../images/img.jpg"
I did it when my image moved from assets/images to views/* or public. Also you can use image_tag Rails helper.
Related
I'm coding html and putting in images but they wont load.
How can I fix this?
<img src="file:///D:/Minecraft.png">
<img src="file:///D:/Minecraft.png">
<img src="file:///D:/MinecraftDungeons.png">
<img src="file:///D:/MyFirendPedro.png">
<br>
<img src="file:///D:/Roblox.png">
<img src="file:///D:/Roblox_Vesteria.png">
<img src="file:///D:/Retro.jpg">
<br>
change your src path to src="D:/Minecraft.png"
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>
I have created a website through bolt blogger template theme which is an XML document and I have created a separate file folder called Images and put all those png images in that.
My file path is: F:\BackupTheme\BackUp1\Images
I have added these below-given HTML codes inside the theme but it still showing the broken image and I cleared all those cache memories in my chrome browser also but no luck.
My html code would be like:
<div class="col-md-6 col-xs-12 col-sm-6">
<div class="mgn-b">
<div class="col-xs-3">
<img src="../../Images/wifi.png" class="img-responsive center-block img-p" alt="WiFi" title="WiFi"/>
</div>
<div class="col-xs-3">
<img src="../../Images/water.png" class="img-responsive center-block img-p" alt="Drinking Water" title="Drinking Water"/>
</div>
<div class="col-xs-3">
<img src="../../Images/air-conditioner.png" class="img-responsive center-block img-p" alt="Air Conditioner" title="Air Conditioner"/>
</div>
<div class="col-xs-3">
<img src="../../Images/kitchen.png" class="img-responsive center-block img-p" alt="In House Kitchen" title="In House Kitchen"/>
</div>
</div>
</div>
I'm expecting png images to be displayed but the actual result is a broken image.
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