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.
Related
I am trying to set anchor to jump on other page with specified heading but my anchor tab is not working.
I have two files index.html and anti foam.html to link with each other but my anchor is unable to jump the Pulp and Paper Industry on other page.
index.html
<div class="col-md-4 col-sm-12 col-xs-12 gallery-item-wrapper nature outside">
<div class="gallery-item">
<div class="gallery-thumb">
<img src="img/works/im2.png" class="img-responsive" alt="2nd gallery Thumb">
<div class="image-overlay"></div>
<i class="fa fa-eye"></i>
</div>
<div class="gallery-details">
<div class="editContent">
<h5>Pulp and Paper Industry.</h5>
</div>
</div>
</div>
</div>
antifoam.html is the file to be linked.
<section id="projects">
<div class="container wow fadeInUp">
<div class="row">
<div class="col-md-12">
<div class="card" style="width:100%">
<img class="card-img-top cimage" src="img/antifoam/PPI.jpg" alt="Card image cap">
<div class="card-body">
<h3>Pulp and Paper Industry.</h3>
<p class="cp">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>
</div>
</div>
</section>
Please tell me where am I doing mistake to accomplish this task.
You have to anchor at the ID. So you could have the index page link be:
<h5>Pulp and Paper Industry.</h5>
and the anchor be:
<h3 id="pulp" >Pulp and Paper Industry.</h3>
You should create a “landing” <a> tag with id (e.g. pulp-and-paper-industry) in your target page (antifoam.html):
<h3>
<a id="pulp-and-paper-industry">Pulp and Paper Industry.</a>
</h3>
Then you can link it in your source page through href:
<h5>
Pulp and Paper Industry.
</h5>
Or do it like this:
<a id="just an example"></a>
I hope you can do something with this. Maybe dont use the %20 and make it a one word instead. Just trail and error
Beldr
I'm using Angular 4, and i want to append some static html that is comming from database. Content have some 'anchor tag' which is hold routerLink attribute. When i show in template via [innerHTML], it's removing 'routeroutlet' attribute from anchor tag. How it is possible to add 'routerLink'? Which is work properly for navigation page?
My content is given below, which is comming from database:
<div class="row banner-item">
<div class="col-md-9 col-sm-9 col-xs-12">
<img alt="banner-image" class="banner-image" src="assets/images/banner-img1.jpg"/>
</div>
<div class="col-md-3 col-sm-3 col-xs-12 banner-image">
<img alt="banner-image" class="banner-image" src="assets/images/banner-img3.jpg"/>
<img alt="banner-image" class="banner-image" src="assets/images/banner-img2.jpg"/>
</div>
</div>
I have the following bit of code that changes my logo on the mobile to a Click To Call image otherwise on all other sizes it's just a regular logo with no click to call feature. However I can't seem to get it to actually click to call. It does change the logo on the mobile size but it won't click to call. It does nothing when you click it. What I'm I doing wrong here?
<div class="container">
<div class="row">
<div class="col-xs-12 hidden-sm hidden-md hidden-lg" align="center">
<a href="tel:8003220503">
<img src="../mobile/Acrictc.png" class="btn-responsive" style="width:100%" alt="Image"></a>
<!--Mobile <img src="../mobile/Acrictc.png" class="img-responsive"alt="image" /> -->
</div>
<div class="hidden-xs col-sm-12 hidden-md hidden-lg" align="center">
<img class="img-responsive" src="../pics/AcriLogoBlue.jpg" width="220" height="120" alt="" />
<!--Tab-->
</div>
<div class="hidden-xs hidden-sm col-md-3 hidden-lg" align="center">
<img class="img-responsive" src="../pics/AcriLogoBlue.jpg" width="220" height="120" alt="" />
<!--Desktop-->
</div>
<div class="hidden-xs hidden-sm hidden-md col-lg-3" align="center">
<img class="img-responsive" src="../pics/AcriLogoBlue.jpg" width="220" height="120" alt="" />
<!--Large-->
</div>
<div class="hidden-xs hidden-sm col-md-5 col-lg-5" align="center">
<p>
<font color="#000080">Windows - Siding - Roofing - Bathroom Remodeling - Patio Spaces</font>
</p>
<a align="center"><h1><strong><font color="red">800-322-0503</font></strong></h1></a>
<p>
<font color="#000080">Quality Products at Unbelievable Prices - Since 1967</font>
</p>
</div>
<div class="col-md-3" align="center">
<span class="visible-lg"></span>
<img src="http://acricompany.com/pics/fpq2.gif" width="220" height="120" alt="" />
</div>
</div>
</div>
The issue you're having is that the very bottom <div> (the fpq2.gif) only has a class of col-md-3, which at smaller sizes is causing it to overlap the image above for some reason (didn't look into it). Add col-xs-12 and any other required classes to that div and your issue will be resolved.
First of all, know that there are such classes as visible-md and visible-xs. They save a lot of code and improve readability. Note that these classes are called hidden-*-up and hidden-*-down in Twitter Bootstrap 4 (where * stands for the size).
Secondly, note that SVG is supported really well these days, see: http://caniuse.com/#search=svg. You just might want to use that for your logo. SVG renders perfect on any size. This will drastically reduce the amount of images you need. You might end up with a 'click me' image with a visible-xs class and a regular one with an hidden-xs class.
Last of all, please note that looking at the rendered size of the page (which is done by Twitter Bootstrap) is not an acurate way (anymore) to determine the amount of pixels you need for your image, due to retina displays. A visible-xs class image might actually need more pixels to be perfectly sharp than an image with a hidden-xs class. Please read this article: http://www.webdesignerdepot.com/2015/08/the-state-of-responsive-images/ (or a similar one).
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 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.