I have retrieved image URL from firebase database but when i am trying to display the image retrieved on web page the size of image is not getting adjusted according to specification which i have provided in tag in body.The image obtained is covering entire background of web page.
JS
var myParam=location.search.split('itemKey=')[1];
alert(myParam);
firebase.database().ref('/Sell_Products/'+myParam).once('value').then(function(snapshot)
{var name=snapshot.child('name').val();
alert(name);
var image=snapshot.child('image').val();
var category=snapshot.child('category').val();
var description=snapshot.child('description').val();
var price=snapshot.child('price').val();
document.querySelector('img').src = image;
});
HTML
<img height="125" width="125"/>
Let's try this: <img style="height: 125px; width: 125px;"/>
You can modify height and width in javascript.
In your html file, add id to your image tag like this <img id="my_image"/>
In your javascript file, add var image = document.getElementById('my_image');
image.height = '125';
image.width = '125';
Related
One of the WordPress plugins renders the uploaded image as a link:
news-paper.png
I want to convert it to an tag with JavaScript so that the link is displayed as an image
Not super familiar w/ Wordpress so there may be an easier way, but you could convert that link into an image by...
Changing the <a ... tag to an <image ... tag :
<image src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" target="_blank" aria-label="new"/>
adding an image via JS based off that value
function add_google_logo() { show_image("https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png", 276,110, "Google Logo");
}
function show_image(src, width, height, alt) {
var img = document.createElement("img");
img.src = src;
img.width = width;
img.height = height;
img.alt = alt;
document.body.appendChild(img);
}
<button onclick="add_google_logo();">Add Google Logo</button>
^ completely ripped from this post: How to display image with JavaScript?
I have the same image at multiple widths, e.g. balloon-35.webp, balloon-40.webp, balloon-90.webp.
I also have multiple img elements with different widths, e.g. <img width="35"/>, <img width="40"/>, <img width="90"/>.
Can I specify the srcset attribute for each img with the 3 files mentionned above and have the img element chose the right file according to the width attribute? For example, if the width of the img is 35, then the 35 file is chosen.
Or is my only option to change the src attribute with the right file depending on the width? Or is there another way to achieve what I want?
Cheers!
Here is the snippet code, i have design for you just enter the images URL in the array of images as mention imagesUrls = ['balloon-35.webp', 'balloon-40.webp', 'balloon-90.webp'];. Value of url should be anything just the last 7 character 40.webp etc should be same as you mention in your upper description.
var a = document.getElementsByTagName("a");
function stups(){
var tagWidth = a[0].getAttribute("width");
document.getElementById("demo").innerHTML = tagWidth;
console.log(tagWidth);
var src = "";
var imagesUrls = ['balloon-35.webp', 'balloon-40.webp', 'balloon-90.webp'];
for (var img of imagesUrls)
{
var width = img.substr(img.length - 7);
var widthValue = width.substring(0, 2);
if (tagWidth.substring(0, 2) === widthValue){
src = img;
}
}
console.log(src);
document.getElementById("imageClass").src = src;
}
<BUTTON ONCLICK="stups()">VALUE FINDER </BUTTON>
<a value="this is a value" width="35px" href="value"><img id="imageClass" src=""> values rule!!</a>
<p id="demo"></p>
Do Ping me up, If you think that i did something good for you. Cheers!
While I wasn't that concerned about it in the beginning, I noticed that my page size is about 9 MB (+/- 200 images). I want to somehow decrease this by only loading the image when the user hovers over the specific <a>, so that only that image is loaded (which should decrease the page size drastically).
The code below is what I'm using right now
<style>
div.img {
display: none;
position: absolute;
}
a:hover + div.img {
display: block;
}
</style>
<div>
Some Name
<div class="img">
<img src="http://sub.domain.com/somename.jpg" alt="Some Name" style="some styles">
</div>
</div>
I think it's possible with jQuery, but I don't know where to start.
Thanks in advance.
Well if you have around 200 images in your directory, when a client requests the webpage it is going to have to download the images to have them ready if you are using a single page layout. I would look into lazy loading just as Adam stated. If you can also I would suggest to try to compress the photos if you can to lower the file size if possible. Good luck!
I fixed my problem by adapting an existing pen-code to adjust my needs (using jQuery). It now works again in IE/Firefox
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function($) {
$('.trigger').mouseover(function() {
// find our span
var elem = $(this).siblings('span');
// get our img url
var src = elem.attr('data-original');
// change span to img using the value from data-original
elem.replaceWith('<img src="' + src + '" style="display:block;position:absolute;"/>');
});
$('.trigger').mouseout(function() {
// find our span
var elem = $(this).siblings('img');
// get our img url
var src = elem.attr('src');
// change span to img using the value from data-original
elem.replaceWith('<span data-original="'+src+'"></span>');
});
});
</script>
Hover over me to fetch an image
<span data-original="https://lorempixel.com/g/150/200/"></span>
you can put the image with no src attribute and put the specific src in the href of div or the image!
then use jquery to get the href of a or data-src of image and then give it to the image the code will be something like this:
<a class="image" href="the-src-of-the-image">
<img src="(leave this blank)">
</a>
and this is the jquery
jQuery(document).ready(function($){
$('.image').on('hover',function(){
var img_src = $(this).attr('href');
$(this).children('img').attr('src',img_src);
});
});
I am using html canvas for resizing image.when i am loading image from project folder ,I am passing image path(img/tom.jpg)to canvas.draw method.After that i am getting base64url and then i am appending that url to the img src,That's working perfectly.But when i am picking image in cordova with cordovaImagepicker and then i am passing response url to canvas draw method ,i am getting base64 url but when i am appending that url to img src ,its coming totally black as square.Please help me ..
Here is my html(here in dummyImage {{this is image url that i picked up from device gallery}}):-
<img id="sourceImage" src="" style="display:none;">
<img id="dummyImage" width="150" height="150" src="{{image}}" alt="The Scream" style="display:none;">
<canvas id="myCanvas" width="230" height="230"style="display:none;">
<script>
$(document).ready(function(){
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var img = document.getElementById("dummyImage");
ctx.drawImage(img, 0,0, 230, 230);
$('#sourceImage').attr('src', canvas.toDataURL("image/jpeg"));
$.getScript('js/test.js');
});
</script>
Here is my console where in dummyImage(img tag id),i am getting picked image url and in sourceImage i am getting canvas resized url and see i am getting black image...
Your problem probably lies in using src="file:///data/data/...". The source should be something like /path/to/picture.jpg.
The canvas itself is not a black square, that's just the image rendering of an empty/transparent canvas. To confirm this, just remove display:none from the canvas element.
Fiddle: https://jsfiddle.net/u857pehs/1/
I have images with dynamically generated image maps. I want users to be able to click on the map and be taken through to the <area href= property.
However, when they click on the background (i.e. not in any of the map's areas) I want them to go through to a background URL.
So my code looks something like this (fiddle):
<a href="fromAnchor.html" target="_blank">
<img src="image.png" usemap="#test" />
</a>
<map name="test" id="test">
<area href="fromMap.html">
</map>
In Chrome/FX it works as I expect - if I click in the area tag's shape I get taken to fromMap.html, if I click elsewhere I get directed to fromAnchor.html.
However, in IE (tested up to IE10) clicking on the img but outside the area does nothing. It does show the URL hint in the bottom left corner, but it doesn't follow the a tag.
Is there a way around this?
I came up with a solution, but it's kind of awful (so would be very happy to see a better answer).
My workaround is to dynamically add a fallback <area> that fills the entire image and let clicks outside the exiting area's fall back to it:
var msie = /MSIE/.test(navigator.userAgent);
if (msie)
{
// Don't do this hack twice
$('map[data-iehack!="1"]').each(function ()
{
// First find the image this map applies to
var $this = $(this);
var name = $this.attr('name');
var $img = $('img[usemap="#' + name + '"]');
// Then find if the image is in an <a> tag
var $link = $img.parents('a');
if ($link.length > 0)
{
// If there is an <a> add an extra <area> that fills the image
var wrapLink = $link[0].href;
var width = $img.width();
var height = $img.height();
var $fallbackArea = $('<area shape="rect" coords="0,0,' + width + ',' + height + '" />');
$fallbackArea.attr('href', wrapLink);
$this.append($fallbackArea);
}
// Flag this map so we don't add it again
$this.attr('data-iehack', '1');
});
}
This example is in jQuery but the principal should work in other frameworks.
There has to be a better way than this - and this hack has to check the browser as I can't figure out how to detect IE's failure here.