Home > Technical & Creative Skills > Programming, Servers & Scripts

How to load an image by url parameter? (6)

08-13-2020 10:00 AM #1 larsometer (Senior Member)
How to load an image by url parameter?

Am a bit desperate and try to find a solution to the following problem:

- When using spinning wheel or giftbox I often have to create new lander when the prize image is different --> lander with iPhone image, with S20 image, with Aldi giftcard etc...
- So each time have a new prize to win I upload new lander on server and change the image files

How to automate?

My idea is to pass the prize image file name via URL parameter. So I would just need to upload new prize image to an existing lander.

What I have tried:

Code:

<script>function getURLParameter(name) {
    return decodeURI(
        (RegExp(name + '=' + '(.+?)(&|$)').exec(location.search)||[,null])[1] || ''
    );
}
</script>

Code:

<script> var image_path = document.write(getURLParameter("pic")); </script>

Code:

<img class="prizeImg" src=image_path alt="" style="width:60%; margin-left: 20%">

www.awesomeurl.com/index.html?prize=iPhone%20X&td=www.offerpage.com&b rand=Samsung&model=Galaxy&pic=black.png

Result: DID NOT work

Also tried with to set the variable manually like: <script> var image_path = "black.png";</script> --> also didnt work.

Questions:

- How to pass file name from url-parameter to js var correctly?
- How to open scr image with a variable?

Hoping there are some coders here that can point my nose on what I did wrong and tell me how to do it right

08-13-2020 11:30 AM #2 jeremie (Moderator)

Hey,

Give an ID attribute to your image, and then use getElementbyId if you have one image only.

Code:

<img class="prizeImg" id="prizeImg1" src="" alt="">
<script>document.getElementbyId("prizeImg1").src = getURLParameter("pic");</script>

Be sure to include the script after the image markup or to fire it only when the DOM is loaded or it will not find the image markup to replace.

See here:
https://www.w3schools.com/jsref/met_...lementbyid.asp

https://thisinterestsme.com/change-s...ge-javascript/

If you have several images, you can use
getElementsByClassName and change the src of all images also, but this function returns an "array", so you have to use a for loop, like they do here to change the style:

https://www.w3schools.com/jsref/met_...yclassname.asp

08-13-2020 11:31 AM #3 twinaxe (Senior Moderator)

I also just tested but didn´t get it running but good ol´ jeremie never disappoints

08-13-2020 11:37 AM #4 jeremie (Moderator)

Your part to get the pic url seeems ok. Be sure to include the relative url in the var, or to hardcode it. For example, if all your images are jpg in the /images/

And if you are not sure you pass the variable correctly, you can use the dev console to display it and check. Remove the console.log when you have finished.

Code:

console.log(getURLParameter("pic"));
document.getElementbyId("prizeImg1").src =  "/images/" + getURLParameter("pic") + ".jpg" ;

08-13-2020 12:35 PM #5 larsometer (Senior Member)

Thank you jeremie for your speedy reply.

Have included the code at the place where the og line was for posting the pic. The image file is in same directory as the index.html is.

This line made the picture appear:

Code:

<img class="prizeImg" src="black.png" alt="" style="width:60%; margin-left: 20%">

I inlcuded your two line (green = og line). But now the picture is not loaded. Also in network tab in dev. console there is no black.png

My URL was like this: ----/Desktop/FIXED%20Landers/nl/phones/index.html?prize=iPhone%20XX&td=www.google.com&bra nd=Samsung&model=Galaxy&pic=black.png

Have no clue what went wrong.

08-13-2020 02:23 PM #6 jeremie (Moderator)

Hey,

The method I mentioned work on a server. It might not work when testing on your computer.
Also, make sure the images are on the same domain

Here is a full code running that I just wrote and tested

Code:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <img class="prizeImg" id="prizeImg1" src="" alt="">

    <img class="prize" src="" alt="">
    <img class="prize" src="" alt="">
    <script>


        var img_name = getURLParameter("pic");

        /* Single Image -- getElementbyId */
        var img_cl = "prizeImg1";
        document.getElementById(img_cl).src = img_name;

        /* Multiple Images -- getElementsByClassName */
        var imgs_cl = "prize";
        var imgs = document.getElementsByClassName(imgs_cl);
        for (i = 0; i < imgs.length; i++) {
            imgs[i].src = img_name;
        }

        function getURLParameter(name) {
            return decodeURI(
                (RegExp(name + '=' + '(.+?)(&|$)').exec(location.search) || [, null])[1] || ''
            );
        }
    </script>

</body>

</html>

Home > Technical & Creative Skills > Programming, Servers & Scripts