How to exchange an image for Javascript

Question

I need to change an image through Java but I’m not getting it, I tried it this way and it didn’t work;

html

<img id="imagemPerfil" src="img/user1.png" alt="profile image"  class="circle z-depth-2 responsive-img activator gradient-45deg-light-blue-cyan gradient-shadow">

Javascript

document.getElementById("imagemPerfil").src ="<?php echo'../img/perfilUsuario/'.$usuario_pesquisado->getImg(); ?>";

I noticed that the value is received by php, but it is not passed to the image src

Answer 1

Hello,

I see two options that Voce can use, maybe with more details of how you want to use I have other ideas, but let’s go there:

Voce can assign direct img to src:

<img id="imagemPerfil" src="<?php echo'../img/perfilUsuario/'.$usuario_pesquisado->getImg(); ?>" alt="profile image"  class="circle z-depth-2 responsive-img activator gradient-45deg-light-blue-cyan gradient-shadow">

Or you create an Ajax request via javascript and on Onsucess you change the image.

Answer 2

This may be browser caching, or server caching primarily if you are using a CDN.

Try placing a url with parameters to see if it doesn’t resolve. Example: /image/file.jpg?v=2

Answer 3

In the head of the page where the javascript will be

<script src="local/do//jQuery.js"></script>

In the context of HTML / Who shows the image

<img id="imagemPerfil"
     alt="profile image"
     class="circle z-depth-2 responsive-img activator gradient-45deg-light-blue-cyan gradient-shadow">

In the context of Javascript / Who asks for the image

<script>
    $(document).ready(function () {
        var params = {
            Request: "GetImgPerf"
        };
        $.get("PerfilUsuarioController.php", params, function (respImg) {
            $("#imagemPerfil").attr("src", respImg);
        });
    });
</script>

In the part where you enter the Profileecontroller.php, is where I did the test here at home, but to work for you, Check in your project, which is the way to access the image.

Generic PHP example / Who provides the image

class PerfilUsuarioController {

    public function verificarRequest() {
        $request = $_GET["Request"];
        switch ($request) {
            case "GetImgPerf":
                $this->getImgPerfil();
                break;

            default:
                break;
        }
    }

    public function getImgPerfil() {
        // Codigo de busca do usua ou qualquer outra verificação
        print $usuario_pesquisado->getImg();
    }

}

$perf = new PerfilUsuarioController();
$perf->verificarRequest();