How Would I Place Parameter Into IMG SRC

Question

Im using my tracking software which allows me to call out parameters on my website such as geo, ip, OS etc.

What Im trying to do is have the parameter be written before then image name. Since we have to target specific cities, we place an image of the city's name in the website. So we have 50 Images, but it would take too long to make 50+ landing pages for each city, so it'd be easier to call out the parameter on the image tag, and have the images on the server. really hard to explain since im not a developer.

<img src="index_files/<script>document.write(getURLParameter("region"))</script>.jpg"> i tried this but didn't work.

<img src="index_files/New%20Jersey.jpg" // i want to replace New%Jersey.jpg with a variable

<script>document.write(getURLParameter("region"))</script> // this code calls out the region on the lander.

I just want to be able to get that parameter call out to replace the image name.

score 1 · Accepted Answer · answered Aug 13 '19 at 21:47

1

You can't nest a <script></script> block within a string attribute - it will not be evaluated. (This is probably for the best, given the opposite would be a pretty big security flaw.)

What you're looking for is a combination of rudimentary attribute setting with string concatenation. Given a hypothetical img tag defined as such:

<img id="myImage" src="" />

You can use the following JS to build its src attribute:

<script type="text/javascript">
    document.getElementById("myImage").src = "index_files/" + getURLParameter("region") + ".jpg";
</script>

The code above (a) grabs the element myImage by its unique id attribute, then sets the src attribute on that grabbed element (=) to the string index_files/ concatenated with the return value of getURLParameter("region") and concatenated again with the string constant .jpg.

If your img element doesn't have a unique identifier, you'll have to utilize another element selection methods in JavaScript.

answered Aug 13 '19 at 21:47

esqew

42,425
27
92
132

this makes a lot of sensse now thanks, how would I add the class? class="content-img img-responsive"> – Adri Gutierrez Aug 13 '19 at 22:11
@AdriGutierrez If by "add the class" you mean targeting an element based on its `class` value, the last line of my answer covers that. In this particular instance you can use [`document.getElementsByClassName()`](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName) or [`document.querySelector()`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector). – esqew Aug 13 '19 at 22:13
hmm still having issues, code looks like – Adri Gutierrez Aug 13 '19 at 22:58
@AdriGutierrez Please do not post code in comment blocks - it's unreadable for myself and the broader community. Instead, place the code with a concise explanation in the body of your question, using comments to inform those you've been conversing with of the edit to your question. – esqew Aug 13 '19 at 22:58
@AdriGutierrez a quick glance at the code you *did* provide shows that you're still using `getElementById` to attempt to target strings you previously informed us are set as part of the `class` - as stated in my answer and subsequent comments attempting to query `id` attributes for values contained in the `class` attribute will not work. Use `document.getElementsByClassName()` or `document.querySelector()` instead (docs linked in my previous comment). – esqew Aug 13 '19 at 23:00
tried both querySelector() and getElementssByClassName(), it's not attributing any value to the file path – Adri Gutierrez Aug 13 '19 at 23:33

score 0 · Answer 2 · answered Aug 13 '19 at 21:59

Assuming region is a querystring value you can read from the server, you'd probably find it easier to just have a PHP script that returns the appropriate image.

So, assuming you could do this:

$region = $_GET['region'];

your script (which I'm going to name getCityImage.php) could look something like this (taken from a related question):

<?php
    $name = './index_files/default.jpg';

    $region = $_GET['region'];
    if($region){
        $name = './index_files/' + region + '.jpg';
    }

    $fp = fopen($name, 'rb');

    header("Content-Type: image/jpg");
    header("Content-Length: " . filesize($name));

    fpassthru($fp);

This would assume that you have a default image (default.jpg) that you could load if the region value could not be read. You'd also want to add some sanitation / validation (see https://www.php.net/manual/en/filter.filters.sanitize.php) to reading the $_GET value.

Then, assuming that works, your markup would be

<img src="/getCityImage.php" />

How Would I Place Parameter Into IMG SRC

2 Answers2