Develop Reference

How to display all images in different page using Javascript and jquery

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" />

jQuery search and replace part of img src

On every page I have a featured image that has an image like this:
<img class="js-image-replace" src="http://www.example.com/category_name/320/89645428_89645427.jpg" />
The /320/ is referencing the size of the image, and I want it to be /660/
How would I search for the 320 and replace it with 660?
All my attempts overwrite the entire string.

If you can guarantee that this value would be the first set of integers that you would encounter within the string, then you could use the following expression to replace it :
<script>
$(function(){
$('.js-image-replace').each(function(){
// Get your image src
var source = $(this).attr('src');
// Replace the first set of integers in your URL with 660
$(this).attr('src',source.replace(/\/\d+\//,'/660/'));
});
})
</script>
Otherwise,
Example
You can see a working example of this in action here and output below :

How to change an image on a site using XML data & jQuery

I have a site that has a banner at the top of the page. I've started to overhaul my HTML structure and am now getting various pieces of information that populate the site out of an XML file. My HTML that uses the jQuery is:
<script>
function myExampleSite()
{
var myURL = window.location.href;
var dashIndex = myURL.lastIndexOf("-");
var dotIndex = myURL.lastIndexOf(".");
var result = myURL.substring(dashIndex + 1, dotIndex);
return result;
}
var exampleSite = myExampleSite();
</script>
<script>
var root = null;
$(document).ready(function ()
{
$.get("Status_Pages.xml",
function (xml)
{
root = $(xml).find("site[name='" + exampleSite + "']");
result = $(root).find("headerImage");
$("td#headerImage").html($(result).text());
var imageSrc=$(root).find("headerImage").text();
$(".PageHeader img").attr("src",imageSrc);
result = $(root).find("version");
$("td#version").html($(result).text());
result = $(root).find("status");
$("td#status").html($(result).text());
result = $(root).find("networkNotes");
$("td#networkNotes").html($(result).text());
....etc etc
});
});
</script>
My XML file looks like this.
<sites>
<site name="Template">
<headerImage>images/template-header.png</headerImage>
<productVersion>[Version goes here]</productVersion>
<systemStatus color="green">Normal</systemStatus>
<networkNotes>System status is normal</networkNotes>
</site>
</sites>
I have several <site>s that all have their own data that will populate different areas of individual sites. I've ran into some snags though.
The first snag is how it currently obtains its header image:
html
<div class="container">
<div class "PageHeader"> <!-- Header image read from XML file -->
<img border="0" src=""/>
</div>
Right now it's hard-coded to be the template header image, but I need to make that generic and read the XML value for that site. So instead of being hard-coded as images/template-header.png it would read the XML value for the current site, which is still going to be the template header - but it won't for every page.
How can I read in the image string to populate my HTML so that each site has a different image depending on what's in the XML?
Edit: Edited code to match current issue. Currently, I just get a broken image, but I can still change it back to the hard-coded image URL (images/template-header.png) and it works.

As you already have the code that can extract the image URL information from the XML, which is
result = $(root).find("headerImage");
$("td#headerImage").html($(result).text());
It's now a matter of attaching that URL, to the image tag. We need to select the object, and then simply change it's src attribute. With jQuery this is actually pretty easy. It'll look something like
var root = $(xml).find("site[name='" + site + "']");
//get the image url from the xml
var imageSrc=$(root).find("headerImage").text()
//get all the images in class .PageHeader, and change the src
$(".PageHeader img").attr("src",imageSrc)
And it should work
Example
In conclusion, if you already have some values you want to put in HTML tags dynamically, it's pretty easy. There's .html("<b>bold</b>") for content, there's .attr("attrName","attrValue") for general attributes. .css("background","red") for changing CSS directly. There's also some class modifying stuff that would be useful in the future.

Change img tag using jquery from a list of items and an url stored in an item

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 ~

prepend img src url

I'm creating an App using html 5 phonegap and one portion of the App is drawing an rss feed in. One problem i've run into is that the feed has images in it and the url for the images is set to be draw from the server the feed is located on. For example the entire img code is:
<img src="/files/2012/01/brazilsal.jpg" />
Now since those images aren't native it won't work on the app.
So i need to prepend the src to be
<img src="http://management.bu.edu/files/2012/01/brazilsal.jpg" />.
I also need it to not affect any other image on the app.
Any ideas on how to do this in javascript or jquery?

Select the images using the attribute starts with selector [attr^=value], then set it's src value using $.fn.attr.
$('img[src^="/files"]').attr(function(i,src){
return "http://management.bu.edu" + src;
});

You need js-uri.
Simple example:
var rssUri = new URI("http://management.bu.edu/data.rss");
var imgUri = new URI("/files/2012/01/brazilsal.jpg");
var fullImgUri = imgUri.resolve(rssUri);
alert(fullImgUri); // http://management.bu.edu/files/2012/01/brazilsal.jpg