I am creating an app using jQuery and Javascript that shows the image in a page when given the URL of the page.
I have this currently:
$.get('https://image.shutterstock.com/image-vector/smart-phone-computer-ram-icon-260nw-605660063.jpg', null, function(text){
document.write(text);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
I put the URL which is https://image.shutterstock.com/image-vector/smart-phone-computer-ram-icon-260nw-605660063.jpg
But when I run this, i get some random text instead of the image...
Is there anyway to get the image?
To let the user type something you need an input element. To display an image you need to use an img element. img elements have a src attribute in which you provide the URL of the image you want to display.
To achieve what you described call a function when the user enters something into the input. This function takes the value from the input field and sets it as the src attribute of the img.
const showImage = () => {
const url = document.getElementById('url').value;
document.getElementById('image').src = url;
}
<input id="url" oninput="showImage();" />
<br />
<img id="image" />
Related
I'm trying to change the img src of a image based on the page URL
For example if I have this img src: https://cdn2.hubspot.net/hubfs/223234/assets-diecut/sampleImage/144_a.png
I want to change the 144 number in the src based on the URL of the page.
This is what the URL of the page looks like: www.exampleexample.com/request-quote-custom-example-card-printing?notes=Diecut%20model%20number:%20144
I want to capture the end of the URL, the 144 part and dynamically add that to the image src.
Is this possible?
Edit: If this isn't possible from the Page URL, would it be easier to get the 144 value from something like this:
<input id="testID" class="hs-input" type="text" name="notes" value="Diecut model number: 144" placeholder data-reactid=".hbspt-forms-0.1:$6.1:$notes.$notes.0" inputmode="text">
It's possible, by js:
Get actual page url
window.location.href;
Get last part of url
var last_set = window.location.href.split("/").slice(-1);
Filter non numeric elements
last_set.replace(/\D+/g, '');
A full example can be this:
var last_set = window.location.href.split("/").slice(-1);
var image_number = last_set.replace(/\D+/g, '');
I am working in jsp... I have a page called first.jsp in it I am displaying bunch of images by using following code:
<img src="a\<%out.println(s5[j]);%> " width="200" height="200" onclick="myfunction()" id="abc" />
Here a is folder's name where all images resides. Now s5[j] is array of image files which I am accessing using for loop.. (image tag is within for loop)
Now my question is that I want to access one of the image which user has clicked to select and forward it to second.jsp page which display that particular image.
I want to do this by javascript by onclick() function which I have displayed in code line.. But when I do that by document.getelmentbyid("abc").src it displays only first image regardless of any other images user selcted...
What to do???
If i understood your question that image tag is in a loop. In a page you can not have elements with same id. ID should be unique to the page. You can give a css class to those image and you can try
$('.classname').click(function(){
// this will return you an array . you can check which is clicked here and send it to next page
});
You can't get clicked image src with ID attribute, insted use this.src
var myfunction = function(){
var src = this.src
//rest of the code here
}
Your question is bit of unclear what do you mean by forwarding image to second.jsp page.But have look at below
1 you can't give id to multiple img tags. so just remove id and use class instead
<img src="a\<%out.println(s5[j]);%> " width="200" height="200" onclick="myfunction()" class="abc" />
2 in myFunction() write down :
function myFunction(){
//this refrence to img tag
var img = this;
// do wahtever you want to do
var src = img.src;
}
I try to use the result of a javascript function to fill in the 'src' value of IMG tags.
I want to use this on many places in same page, otherwise I think I could use an ID in the IMG tag and change src with getelementbyid.
The idea is to load images depending on the size of the userscreen.
The code which does not give me correct result:
<html>
<head>
<script>
function path_images(image)
{
var s = screen.width;
path = (s<1080) ? "small":"large";
return path + "/" + image;
}
</script>
</head>
<body>
<h1>Some text</h1>
<img alt="error" src=path_images("someimage.png")>
<img alt="error" src=path_images("someotherimage.png")>
</body>
Please tell me how to do this.
You could try this. It selects all elements with tag img and changes eachs SRC. If you want to change the source of one single image you should use ids or any other identifier.
function changeSource()
{
aImgs = document.getElementsByTagName("img");
for ( var index in aImgs )
aImgs[ index ].src = path_images( image_here );
}
Grab the images:
var images = document.querySelectorAll('img');
Convert the nodelist to an array and loop over it updating the src.
Array.prototype.slice.call(images).forEach(function (img) {
img.src = path_images(img.getAttribute('src'));
});
#ron for this purpose you just need to call a function on body onload, what this function will do? this function will very much get the screen width first and after the decision whether there would be small or large it will grab all the images coming at the page along with their src attributes, then loop over each (maybe foreach) of them in the same body onload function and concat the small or large before the path and this will fullfill your requirment.
Well function can't be call on img src tag it can be at onclick event. each javascript function is called at some event.
I have a list of items displaying a link in my view like this:
#Html.ActionLink(cardPackInfo.mCard.mMasterCard.mCardName, "ViewItemDetails", "Item", null, new { #class = "cardImage", #data_id = cardPackInfo.mCard.mMasterCard.mCardImageLink})
As you can see, I'm trying to store a data in a kind of #data_id like I did.
I have a field dedicated to display an image:
<div id="image">
<img id="cardImageDiv" src="~/Images/Functional/cardback.jpg" alt="defaultCard" class="nullify"/>
</div>
and my jQuery script is like this:
$('.cardImage').mouseover(function() {
var imageSrc = $(this).attr("data-id");
alert(imageSrc);
$('#cardImageDiv').attr('src', imageSrc);
var newImage = $('#cardImageDiv').attr('src');
alert(newImage);
});
So what I'm trying to do is, when the user's mouse is over one of the link, I take the url when the image is located (which is stored in my model at cardPackInfo.mCard.mMasterCard.mCardImageLink and change the src of the current image located in the image src with the id cardImageDiv.
However the image is not changing. The two alerts are there to testify that the first data obtained is the url of the image (which may look like this: ~\Images\CardsImages\Return to Ravnica\(RTR) - 231 - NameOfTheCard.jpeg) and the second alert tells me of the current src. But the result I have is that the first image is removed and I have the small "broken link" icon. Can anyone help me out?
Can you try with the src like "/Images/etc" and lose the ~
In my HTML document I want to create a placeholder for an image but leave the source 'To be determined' so to speak so that when I put a link on the image it will acquire a snapshot from the target website to use as the image source. If you don't quite understand what I'm saying it is as follows:
I want to create a linked Image
<img src="source">
and I want to use javascript to replace the 'source' with a snapshot of the '#' page.
I would like to use this so that on my website I can link to Youtube videos (using the link in the embed codes) and automatically acquire a thumbnail for the link without any work more than inputting the link/URL.
I am not very javascript savy so any help with that portion will be much appreciated, although I am trying to do this with very minimal Javascript if possible. All answers are much appreciated and if any more information is needed just ask.
If you want to put YouTube screenshot I recommend using jQuery with jYouTube and here how I put it together:
JAVASCRIPT:
// Run when page is load
$(function(){
// Find all <a> inside element with youTube class name
$(".youTube a").each(function(){
// Get reference to found <a> link
var lnk = $(this);
// Get YouTube thumb image for <a>'s href attribute
var url = $.jYoutube(lnk.attr("href"));
// Now update inside image's src attribute with thumbs image
lnk.children('img').attr("src", url);
});
});
HTML
<div class="youTube">
<img src="#" /><br />
<img src="#" /><br />
<img src="#" /><br />
</div>
Also I put it in jsfiddle for easy demo: http://jsfiddle.net/snyew/
I hope this helps :-)
It takes an Image object.
yourImg = document.getElementById("image_id");
var newImg = new Image();
newImg.src = //URL of the image to be acquired
yourImg.src = newImg.src;
Assuming you want to do this for every link with just an image as child, you can do:
$('a').each(function() {
if($(this).children('img').length == 1 && $(this).children().length == 1) {
// get snapshot
var snapshotImgURL = getSnapShotOf($(this).attr('href')); // replace this with your AJAX call to get the snapshot
// set it to the image
$(this).children('img').attr('src', snapshotImgURL);
}
});
The above assumes you are ok with using jQuery on the project.