We Keep Coding

How to pass string inside src attribute of image tag <img src=""> using jquery/javascript?

I have a image tag which is :
<img id="imageUpload" alt="your image" style="display: none;">
I have a base64 code(it is working) of which i have added in string:
var imgName="data:image/png;base64,"+base64codes+"";
console.log(imgName);
How to pass the string value inside the src attribute of image using jquery/javascript?
I tried to pass the imgName inside attr using jquery but it is not working.
$('#imageUpload').attr('src',imgName);
my console for imgName is :

Your code looks correct. Maybe you just have to remove the style 'display: none'
$('#imageUpload').attr('style', '');

How I can create a button for save a image with Javascript or any Javascript framework?

I would like save with a button a generated picture. I see the fastest solution is JavaScript, probably JQuery or any framework.
My application generate a img label, for example:
<img src = "data:image/png;base64,iVBORw0KGgo...(it's very long)"/>
The many problem is the src attribute because change for my application, first I need catch the URL of this.
Thank you very much!

You can use the download attribute in HTML. If the img src is automatically generated, you could use the script below to put it in the href:
$('#save').prop('href', $('img').prop('src'));
<img src="http://blog.grio.com/wp-content/uploads/2012/09/stackoverflow.png"/><br/>
<a id='save' download>Save</a>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

JavaScript "<SCRIPT>" in Image src attribute

So I have the following JavaScript function.
var LogoUrl = function() {
document.write('views/img/common/site-logo.svg');
}
And I want to have this function used in a html img src attribute.
Here is a example though this syntax wouldn't work, it should give you an idea of what I am looking for.
<img class="site-logo" src="<script> LogoUrl() </script>" alt="Site Logo">
And hoping this would export the following in the browser
<img class="site-logo" src="views/img/common/site-logo.svg" alt="Site Logo">
What is the best approach to doing this?

You can do this with the following instead:
<script>
document.write('<img class="site-logo" src="' + 'views/img/common/site-logo.svg' + '" alt="Site Logo">');
</script>
Since the script tag is indeed a tag, you can't put it inside the attributes of another tag.
A much better approach however would be the following:
Prepare a span element for the element to appear in, and give it a specific id. This would be your HTML:
This is my image: <span id="myImg"></span>.
and this will be your jQuery code:
$(function() {
$('<img>').class('site-logo')
.attr('src', 'views/img/common/site-logo.svg')
.attr('alt', 'Site Logo')
.appendTo('#myImg');
});
Alternatively, instead of preparing a span, you could prepare the image without defining a src attribute, with the following HTML:
This is my image: <img id="myImg" class="site-logo" alt="Site Logo">.
and the following jQuery code:
$(function() {
$('#myImg').attr('src', 'views/img/common/site-logo.svg');
});

You can use jquery $(document).ready() to set the image src.
$(document).ready(function (){
$('img.site-logo').attr('src', 'views/img/common/site-logo.svg');
});

You could do this - but this makes it obstructive.
<script>document.write("<img class=\"site-logo\" src=\"views/img/common/site-logo.svg\" alt=\"Site Logo\">")</script>
It is also not very organised because it ties everything so much with the markup that you might as well just have it as markup.
You're better off doing it properly by changing the src property
var logo = document.getElementsByClassName('site-logo')[0];
logo.src = 'http://www.develop.com/Images/v3/tech-symbols/angularjs_logo.png';
demo here http://jsfiddle.net/andyw_/XxTuA/268/
If this is all you need to do - I don't think it justifies the use of a selector library or front-end framework.

I need to create an Image element in an html form with all its attribute using javascript how could i do it?

i have a form in which I want to display a loader image only if the file upload field has any path in it, for that i thought of creating the image element in java script along with attributes: src, id and alt..
i am not aware of how to create elements using javascript. please help me.

This page has a good tutorial on dynamically creating DOM elements using javascript.
The standard way to do it is with the document.createElement function.

Small example which adds html code to a placeholder.
<script>
function example()
{
placeholder.innerHTML = "<img src='imagehere'/>";
}
</script>
<input type="button" value="Click" onclick="example();"/>
<div id="placeholder"/>

Using Jquery makes this nice and easy:
Javascript:
$('#MyElementID').html('<img alt="" src="Images/myimage.jpg" />');
HTML:
<div id="MyElementID"></div>
Renders as:
<div id="MyElementID"><img alt="" src="Images/myimage.jpg" /></div>

JS/jQuery: How can I automatically wrap <a href> tags around <img />s with the href being dynamic based on the img src?

Heads up: I am quite new to Javascript and have so far only written very basic scripts based on jQuery.
I am a quick study though..
What I am after is a way to:
1) identify tags
2) read the img tags
3) wrap the tag with an <a href> tag with a dynamic link based on the src of the img.
Example:
<img src="../../img_T/Culture/C_01/c_01_abb_005.jpg" width="310" height="180" alt="image1">
should become
<img src="../../img_T/Culture/C_01/c_01_abb_005.jpg" width="310" height="180" alt="C 01 Abb 005">
I am thinking that reading the src of each image and writing it to a variable, then reading that variable and replacing the /img_T/ with /img_L/ and then writing that to a new variable which can then be simply added to each href.
This is how far I have gotten, but this does not work at all:
/* in the comments 'xxx' represents a different unique image string */
/* This should get the <img src="../img_T/xxx" /> string as text and store it. */
var $imgSrc = $(".displaywrapper img").attr("src");
/* This part should use the above sourced <img src="../img_T/xxx" string and replace ../img_T/ of the src with ../img_L/ and store it in var = imgLink. */
var imgLink = $imgSrc.text().replace("img_T","img_L");
/* This part should then wrap the <img src="../img_T/xxx" /> so it becomes <img src="../img_T/xxx" /> */
$(".displaywrapper img").each(function(){.wrap("")});
Thanks for reading.
Jannis

I think this should do the trick:
$(document).ready(function() {
$(".displayWrapper img").each(function() {
var src = $(this).attr('src').replace('img_T','img_L');
var a = $('<a/>').attr('href', src);
$(this).wrap(a);
});
});
Line 1: Wait for the document to be ready before doing anything..
Line 2: Loop through each image using jQuery's each function.
Line 3: Get the current image's src with attr and replace img_T with img_L
Line 4: Dynamically create a new <a> tag and set it's href attribute to the src in Line 3
Line 5: wrap the <a> tag around the <img> tag.

If you just need the images clickable, do this:
$(".displayWrapper img").click(function(){
document.location.href = this.src.replace("img_T", "img_L");
});