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 :
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, '');
<img src="../1.jpg" alt="" id="change-image">
<button id= "press-to-change">Press</button>
let count = 0;
let arr = ["1.jpg","2.jpg","3.jpg","4.jpg","5.jpg"]
document.getElementById("press-to-change").addEventListener("click", function(){
count++;
document.getElementById("change-image").src = "../" + arr[count]
So we have an HTML with an image and a button and in JS we have an array with images and we want to change the src of the image when we press the button(this is only a part of the code)
The above code works fine but i have a question why with:
document.getElementById("change-image").src = "../" + arr[count] code works fine but with document.getElementById("change-image").src = `url('../${arrImage[count]}')` code doesn't work.
For example this next code from another project works perfectly imageContainer.style.backgroundImage = `url('../${arrImage[count]}')`
background-image is a for style of an element and uses css format.
src is for the actual source of the image element and requires a valid path only
With images, you use or assign to the src property only for <img> elements.
If you want to set the background image of an arbitrary (but non-<img>) element, you need to use different syntax: you have to assign to the style.backgroundImage property, and you have to surround the URL you're setting with url(...)
The rendered HTML markup looks like this:
<img src="foobar.png">
<div style="background-image: url('foobar.png');"></div>
They're not interchangeable. With the background-image property, you need to always use url(...). With the src attribute, you need to never use url(...).
The text: url(image.jpg) is syntax only used in CSS.
That’s why it works for backgroundImage but not src
An image will always need src="path/to/image.jpg" without url() surrounding it.
We have created an image gallery addon for Page builder
which displays images as gallery like so:
<img class="sppb-img-responsive" src="'.JUri::base(true).'/'.$value->thumb.'" alt="' . $value->title . '">
But the problem is that when it uses an external image link
it returns an error like in this example:
<img class="sppb-img-responsive" src="/dev/ibwintalldev/https://cdn.pixabay.com/photo/2015/05/15/14/38/computer-768608_1280.jpg" alt="test">
Is there any way to detect this problem so as to fix this?
Or to check if the image has an external link?
Thanks
Lahmar
Why the src tag contains /dev/ibwintalldev/, because of which image is not displaying. Remove it and try.
<html>
<body>
<img class="sppb-img-responsive"
src="https://cdn.pixabay.com/photo/2015/05/15/14/38/computer-768608_1280.jpg"
alt="test">
</body>
</html>
You can remove the unwanted text before https: like so in javascript:
// returns all images on page
images = document.getElementsByTagName("img")
for (let img of images) {
// replaces extra text from the src
img.src = img.src.replace(/(.+?)(?>http)/, "")
}
Regex explanation:
(.+?) matches everything (if any) up to what follows this (i.e. http) and adds to matching group
(?=http) looks ahead for pattern http (but doesn't include in matching group so doesn't get replaced)
The following shows the regex working:
let img = new Image;
img.src="/dev/ibwintalldev/https://cdn.pixabay.com/photo/2015/05/15/14/38/computer-768608_1280.jpg";
// we apply the regex
img.src = img.src.replace(/(.+?)(?=http)/, "")
console.log(img.src);
This question already has answers here:
Changing the image source using jQuery
(17 answers)
Closed 4 years ago.
I want to change one letter in the src of the image tag using js or jQuery.
<img src="/media/image_i/ball.png">
<img src="/media/image_i/bat.png">
I want to change that letter i in the src to a number.
Eg.it should look like this -
<img src="/media/image_4/ball.png">
<img src="/media/image_4/bat.png">
EDIT- When i used the solutions everything was working, but it was changing the "src" of all image tags to same as first image, so the second image which is "bat.png" is getting changed to "ball.png", so same image is displaying two times.
Thank you!
You can simply get the src attribute of the images, loop it over and replace the _i with _4 using JQuery. To check the below snippet works, you need to use inspect element of the browser and check the src attribute.
$(document).ready(function(){
$('img').each(function(){
var src = $(this).attr('src');;
$(this).attr('src', src.replace('_i','_4'));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="/media/image_4/ball.png">
<img src="/media/image_4/bat.png">
You can do this job using regex.
$(document).ready(function(){
var src = $('img').attr('src');
var newsrc = src.replace(/_./g, '_4');
$('img').attr('src', newsrc);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="/media/image_i/ball.png">
You can develop it further.
For more : https://stackoverflow.com/a/2912904/5792209
First, you'll need to identify the particular img element you need to modify. This can be done in a variety of ways, like giving the img in question an id or a class that is unique. If the image is the only one using the src you've specified in your question, you can use that (and that's what I'm doing in the code that follows).
After getting the proper reference to the element, use the .attr() method to get/set the current src value and the standard String.replace method to swap the values:
var current = $("img[src='/media/image_i/ball.png']");
current.attr("src", current.attr("src").replace("_i", "_4"));
If this is all you need to do, JQuery is overkill. Standard JavaScript is just as simple:
var el= document.querySelector("img[src='/media/image_i/ball.png']");
el.src = el.src.replace("_i", "_4");
I want to load 3 random images from an array that contains the names of all of the images. I did this but the src doesn't work. I don't know why! Here is my code:
var images = ['image1.jpg', 'image2.jpg', 'image3.jpg'];
var longitut = images.length;
var num =1+ Math.floor(Math.random()*longitut);
var foto="\"image"+num+".jpg\"";
foto=foto.toString();
alert(foto);
document.getElementById("imatge1").src=foto;
Try to remove quotes from the string value:
replace
var foto="\"image"+num+".jpg\"";
with
var foto="image"+num+".jpg";
Also, make sure that your image element has the proper id attribute value. In your case it should be:
<img id="imatge1"/>
The javascript code is correct, so it must be that you're either mistyping "image1" in the last line, or there's no element in your page.
Just add this to your HTML page:
<img src="" id="imatge1" />
You have a spelling mistake here,should be image1 not imatge1 should be:
document.getElementById("image1").src=foto;
Also did you look into relative and absolute paths when linking?, as it could be a path error.