Develop Reference

File not found error on setting background image using img src attribute

I am trying to change background of an element with id = "image" using source attribute of an image in the html. The source is an absolute url on the web and its loading perfectly at other places of html.
The problem is in the last line of the code. previewPic is an image object that I am passing to this javascript code.
I have created a var x to see if I am getting the src correctly and thats working fine. I am seeing correct in the console.
I have already tried different combinations of "x" "url(x)" etc.
function upDate(previewPic) {
var x = previewPic.src;
document.getElementById('image').innerHTML = previewPic.alt+" "+x;
console.log(x);
document.getElementById('image').style.backgroundImage = "url(x)";
}
File not found error.

Getting image source from image element using $(this).find("");

I'm currently stuck trying to get the image source (eg: ./imgs/image.jpg) from an image element.
I've managed to get it working, partially, by using the following:
var image = document.getElementById("home-our-doughnuts-box-image").getAttribute("src");
But I need to use $(this).find("#MY_IMAGE_ELEMENT_ID_HERE").getAttribute("src"); so it references the correct box and image (I have multiple containers with elements in them that share the same ID, same with the box).
So how can I access the images src attribute to return the unresolved path using $(this).find(), as it's not working ?
Thank you.
EDIT
I am using this because I have assigned a click function to each of the boxes. So need to use $(this) to reference that particular box.
Full Code:
box.onclick = function() {
var image = $(this).find("#home-our-doughnuts-box-image").getAttribute("src");
alert(image);
doughnutExpandedName.text($(this).find("#home-our-doughnuts-box-name").text());
doughnutExpandedDesc.text($(this).find("#home-our-doughnuts-box-desc").text());
};

Try this:
var src = $(this).find("#MY_IMAGE_ELEMENT_ID_HERE").attr("src");

Alternative to storing an image path

I need to dynamically generate a catalogue of items on my page. Each item consists of description data that is stored in a JSON object. Each item needs to have an image associated with it. The user fills out a form for the description data and selects an image from their computer "to upload". The javascript right now is replacing a placeholder image in the page with an image the user selects from their system. I want to be able to store the path of the image or the image itself in the JSON object. Can this be done? I have read that you cannot store the absolute file path for security reasons. I cannot use a server, or jQuery, as this is "simulated" behavior for an assignment.
EDIT: I updated the code to follow the mozilla developer tutorial suggested by Varinder but it does not work. Did I implement this incorrectly?
my html code:
<div class="uploadImgContainer">
<img src="images/upload_wText.png" id="uploadImgCont" alt="Image"/>
</div>
javascript code:
var petImg; // global variable to store petImg
function uploadPetImg(imagePath){
document.getElementById('uploadImgCont').src=imagePath;
}
window.onload=function(){
document.getElementById('uploadImageBtn').addEventListener('change',function(event){
var imagePath=URL.createObjectURL(event.target.files[0]);
uploadPetImg(imagePath);
/* to store imagePath of image */
var preview = document.querySelector('uploadImageBtn');
var file = document.querySelector('input[type=file]').files[0];
var fReader = new FileReader();
fReader.addEventListener("load", function(){
preview.src = fReader.result;
}, false);
if(file){
petImg = fReader.readAsDataURL(file);
}
});
}
When I inspect the page in Chrome, the field in the JSON object doesn't show at all. There should be a last field called petImg. The output is:
{"petName":"dash","username":"bry","petType":"cat","petBreed":"russian blue","petAge":"8","petGender":"male","petLocation":"sd","records":"yes"}
Any alternatives? Thanks in advance.

jquery lightbox select source/link based on content type

I'm trying to create a lightbox that uses the rel attribute and the href/src (depending on the type of content). I need an if/else statement to assign an href to a variable (contentURL) if the content's a video but assign the src instead if the content's an image.
html for video content:
html for image content:
<img src="images/photo.jpg">
Here's what I have so far:
$("a[rel='lightbox'").click(function(e){
e.preventDefault();
var shadow = $('#lightbox-shadow'),
lightbox = $('#lightbox');
shadow.fadeIn(300);
lightbox.delay(450).fadeIn(300);
var contentURL; //assign href or src to this variable
//IF/ELSE STATEMENT HERE
shadow.click(function(){
shadow.fadeOut(300);
lightbox.empty();
});
});
Also, if you could help me understand the ajax method for loading the content, that would be awesome! :)

Given the HTML above, one way to tell whether to grab the src or href attribute would be to test if the clicked link contains an image tag. I have a sample working with this code:
$("a[rel='lightbox'").click(function(e){
e.preventDefault();
var shadow = $('#lightbox-shadow'),
lightbox = $('#lightbox'),
$target = $(e.target).closest('a'),
$img = $target.find('img'),
contentURL;
shadow.fadeIn(300);
lightbox.delay(450).fadeIn(300);
contentURL = ($img.length > 0) ? $img.attr('src') : $target.attr('href');
console.log(contentURL);
});
You can see that working here if you open the console:
http://jsfiddle.net/9XELr/
However, this sample will only work if your youtube links never contain images. If they might, you will need to set up some other conditional logic, maybe a class or data attribute on the link itself that is different depending on the type of content.

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 ~