I’m trying to display multiple images using a template variable, but the images are not showing up. The paths are correct, and there are no errors in the console. I have installed the image renderer plugin, but it still isn’t working. I’m using a variable named test to filter the images. Here is the code I’m using:
<div>
<img id="addisAbeba" alt="image">
</div>
<script>
$(function () {
const variable = '${test}';
let img_name = variable.substring(variable.indexOf('_') + 1, 100);
// Replace spaces in img_name with underscores
img_name = img_name.replace(/\s+/g, '_');
let img = "/public/img/Sensor_Plot/16mm/" + encodeURIComponent(img_name) + ".png";
document.getElementById("addisAbeba").src = img;
console.log("Image name is:", img_name);
console.log("Image path is:", img);
});
</script>
I’ve double-checked the code and the paths, and everything seems correct. However, the images still aren’t displaying.
Here’s an example image for reference:
