How to load an image respecting / linking with the return of a variable in Json

Question

Good morning friends....

I don’t know if I’ll be able to make myself understood, but I need to upload an image linked to the type of feedback I might receive from Json.

Example:

Red, Yellow and Truth Signals

echo 'SINAL' .$data["CreditData"][0]["SINAL"].'</td>'; 

Let’s say it returns red.... instead of appearing written, it wanted to carry a red image.... red.png

I wonder how I can do that?

<img src='' id="icone" width="60px">
<br/>

<script>
$(document).ready(function(){
	$('#icone').attr('src','https://meusite.com.br/icons/' + data[0].sinal + '.png');
	});
});
</script>

Hold on, have some idea to help me?

Hugs

Answer 1

Marcos, all right?

You can leave a div or any other empty tag in the place where you want the image to appear. After that, in the result of your JSON, you can create an element img with javascript and hang it on your div empty.

For example:

<div id="image"></div>

<script>
var img = document.createElement("IMG");
img.src = "img/exemplo.png";
document.getElementById('image').appendChild(img);
</script>

Of course you should put the conditions according to your return, but this logic is the way you would like it. You can use the AJAX to capture this file JSON.

*EDIT: I’d rather you used a call "AJAX" to capture the JSON right in the JAVASCRIPT, without using the PHP. But we can solve this problem faster.

You can add this value from PHP within a input hidden, capture the value of it by javascript and do the process, for example:

<input value="<?php $data["CreditData"][0]["SINAL"] ?>" id="cor" type="hidden"></input>

<div id="image"></div>

<script>
var cor = document.getElementById('cor').value;
var img = document.createElement("IMG");

if(cor === "red")
   img.src = "img/vermelho.png";
else if(cor === "green")
   img.src = "img/verde.png";


document.getElementById('image').appendChild(img);
</script>

I think this will solve your problem, but I will leave a link for you to learn how the request works AJAX: https://www.devmedia.com.br/ajax-com-jquery-trabalhando-com-requisicoes-assincronas/37141