Im building an app with Phonegap. It takes xml from an rss feed and creates html from it to present a news feed. The problem is the image paths are relative. I need to replace the relative path with the full path. The images tags appear inside a "description" xml tag. I get the contents of description like this:
$(xml).find('item').each(function (index) {
description = $(this).find('description').text();
console.log('description');
The console output is:
<p>Senior Rugby</p>
<p>CBC v CBS</p>
<p>
<span class="mjwideimg"><img width="300" height="247" src="/images/latestnews2/Resized/logo_300x247.jpg" alt="logo" />
</span>
</p>
I then try to replace path with a full path. I do:
$(description).find('img:first').attr('src', 'http://www.domain.com/img/test.png');
And then get the new html with full path:
description = $(description).html();
console.log(description);
However, this is just outputting:
Senior Rugby
with everything else stripped away. What am I doing wrong?
In first console.log you are doing
description = $(this).find('description').text();
console.log('description');
here you are log the xml node not the variable you coded.
And in another, you did something different (this time you did it for variable)
description = $(description).html();
console.log(description);
Another point is use .prop() instead of .attr()
$(description).find('img:first').prop('src', 'http://www.domain.com/img/test.png');
When you are finding the image, is description still set to $(this).find('description').text();?
If so the JQuery object is not pointing to HTML element but rather a string of text that is within that element.
Try replacing description with $(this).find('description');
In the end I did this:
description = $(this).find('description').text();
$(description).find('img').each(function(i, obj){
src = $(obj).attr('src');
//check if not full path
if(src.indexOf('http') === -1){
//therefore its a relative path
description = description.replace(src,"http://domain.com"+src);
}
});
Related
I'm making an extension that grabs an image URL within the "uCW" div on an HTML page.
Currently, I have:
var uCW = jNode.closest("div._q7o");
var image = uCW[0].children[1].getElementsByTagName("img")[0].src;
console.log(image);
That finds the image by going into the div/children and pulling the image. Unfortunately, this method is problematic, since it stops working if the children change, which they regularly do.
Instead, I want to select the image by searching the div and all its children (there are a lot of them) for the first image/string that starts with "https://external" (all the images I want start this way, and that doesn't seem to change.)
This is what I tried:
var uCW = jNode.closest("div._q7o");
var image = $(uCW).find([name^="https://external"]).src;
console.log(image);
This doesn't work. The console just prints "undefined."
You could do it like this, if ucw is a classname (if it's an id, you would write $("#ucw") instead):
var image = $(".ucw").find('[src^="https://external"]').attr("src");
console.log(image);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="ucw">
<img src="https://external/1.jpg"/>
</div>
If your images have a name attribute with the source of the image as value, you can also adjust your attempt to fetch the images via their name attribute like you did:
var image = $(".ucw").find('[name^="https://external"]').attr("src");
I've double checked and triple checked for typos numerous times and I'm sure the file paths are correct.
Basically what I'm trying to do is toggle through a bunch of images on my pc all located in the same folder. I've copied every img file's complete file path and set them as separate string values in an array.
With simple html, I've set the src attribute of the img element to a complete file path to an img. Onload, the img is loaded, no problem.
However, utilizing javascript just to test the waters, I've written a function to be invoked by click of a button to reset the src attribute's string value to another file in the array. No matter which file path I set it to with javascript, I get the same err_file_not_found issue.
js:
var btn = document.getElementById('butn');
var img_element = document.getElementById('imgElement');
var picArray = [
"C:\Users\pcName\picFolder\pic1.jpg",
"C:\Users\pcName\picFolder\pic2.jpg",
"C:\Users\pcName\picFolder\pic3.jpg"
];
btn.onclick = function() {
img_element.src = picArray[2];
};
<button id="butn">click</button>
<img src="C:\Users\pcName\picFolder\pic1.jpg" />
<!--img src="C:\Users\pcName\picFolder\pic3.jpg" will load no problem
if written html-->
You're getting the image elements by id imgElement but in your HTML there is no such id is associated with the img tag.
edit your HTML to <img id='imgElement' src="C:\Users\pcName\picFolder\pic1.jpg" />
You can't refer to the picture as an absolute file path on your local computer.
You need to put the images in the same folder, or a subfolder, then reference the image by relative path.
I have a html snippet being returned through ajax. The snippet is an <img> tag.
<img src="image.jpg" />
I need to extract the value of the src attribute without loading the image initially. The reason for this is the src attribute contains a partial path that I need to manipulate in my app to load the image properly.
I have the following code currently extracting the src attribute:
var src = $(value).attr('src');
However, this causes the image to load, resulting in a 404. I would like to avoid this unnecessary request.
How can I extract the value of the src attribute without causing the browser to load the image?
I solved this by changing the name of the src attribute before loading it into jquery.
value = value.replace('src', 'data-src');
var src = $(value).attr('data-src');
Doing this allows me to extract the value without causing the browser to attempt to load the images.
Your best bet is probably to output a data tag on the image. You can then manipulate this using jQuery and then use it to write the final image path.
So you'd do something like this in your HTML:
<img data-img-src="abc.jpg" class="my-image" />
Then in your jQuery:
var path = $('.my-image').data('img-src');
console.log(path); // Do something here, then write the new path with:
$('.my-image).attr('src', new_path);
EDIT: Sorry I just re-read the bit where it's coming via AJAX. In that case, you can probably use the data callback of your ajax request to strip the src from the image.
$.ajax('someURL.html', function(data){
var html = data.replace(/\ssrc/g, ' data-src'),
img = $(html),
src = 'some/path/' + img.data('src');
img.attr('src', src);
$('#container').append(img);
});
If you just have the string , like <img src="image.jpg" /> why dont you go for regex?
Something like: /[\"\'][a-z0-9A-Z\.]*/.
PS:My regex skills are poor,so you could manipulate it accordingly.
Use
var string = '<img src="image.png">';
var matches = string.match(/src\=("|')(.*?)\1/);
console.log(matches[2]);
You can simply remove the attribute after accessing it.
This will not load the invalid image, as you can confirm in your console:
var s= $('<img src="invalidURL.jpg">'),
src= s.attr('src');
s.removeAttr('src');
console.log(src);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Remove removeAttr(), and it will attempt to load the image.
I have a title tag that looks something like this:
<title>My Page Title - Photo #3</title>
I want to use JavaScript to change the numeric part of it, without having to hard code the "My Page Title - Photo #" string which is generated server side.
I tried wrapping the number in a span so that I could change the contents of the span:
<title>My Page Title - Photo #<span class="photoid">3</span></title>
But it seems HTML is not allowed in the title tag. I'd really like to pursue the class approach if possible as that would allow me to use a line of jquery such as this:
$('.photoid').html(new_photoid);
Did I mention that the photoid appears in several places on the page, which is why I want to be able to use this oneliner to change them all at the same time? For example:
<p>A paragraph also containing the number <span class="photoid">3</span></p>
A title can only have text, so you need to parse it out.
document.title = document.title.replace(/\d+$/, "new value");
title can't be set like that,
it's not a child of .html
some thing like
var num = 3;
document.title = "foo "+num
to set the title, then reuse num for these photoids.
Use the jQuery onDocumentReady syntax:
$(function () {
var elements = $('.contains_photoid');
elements.html(elements.html().replace("3", "4"));
$(document).attr('title', $(document).attr('title').replace("3", "4"));
});
You can't see the title change in this example, but that is the syntax. See Changing the page title with Jquery
The "3" and "4" can be changed to anything, so you can create the page with a unique character string in place of the real ID in order to easily replace it if it appears in text with numbers already in it.
http://jsfiddle.net/ZmXj5/1/
Javascript
var photoID = 355; //this assumes you have some code where you set this photoID value
var title = document.title;
title = title.substr(0,title.lastIndexOf('#')+1);
document.title = title+photoID;
See this fiddle for proof: http://jsfiddle.net/xrkhA/
(I used a div content because you can't use title in jsfiddle)
You can either use, but $('title') will fail in IE8
document.title="new title";
or
$('title').html('new title');
or
$(document).attr('title','new title');
I'm having a problem getting the condition in this if statement to work, i've tried getElementById & src.indexOf but I am still very new to this. I am trying to replace the blank/ball image with the x/pikachu image only if the blank image is currently showing, so if there was one of the other images there it wouldn't replace it. It doesn't seem to recognize the condition I have in there as true, any idea why?
i've also tried:document.getElementById(bn).src=blank & document.images[bn].src==blank & document.pokemon.bn.src==blank
looking for a way to verify if the current source of the image is the var blank.
thank you
var x = "pikachu.jpg";
var o = "Meowth.jpg";
var blank = "ball.jpg";
function b1Move(imageName){
temp2=imageName;
if(document.pokemon[temp2].src==blank)
document.pokemon[temp2].src=x;
cMove();
}
and the html for the images looks like this:
<a href="javascript:b1Move('b1')"><img src="ball.jpg" height=150 width=150 name=b1
id =b1 > </a>
The src property gives the fully resolved URL. You probably want to use the src attribute, which stays the same:
if( document.pokemon[temp2].getAttribute("src") == blank)
document.pokemon[temp2].setAttribute("src",x);
you should try
if(document.pokemon[temp2].src.indexOf(blank) != -1)
since src is the full url.. then you can check it it contains your image name