0

Hola tengo un problema con el siguiente código es que no me muestra las imagenes, alguien sabe a que se puede deber?

function jsimagen() {
        
        var fotos = document.getElementById('fotos').value;
        var arr = document.getElementsByClassName('imagen');
        arr = [].slice.call(arr); //I have converted the HTML Collection an array
        arr.forEach(function (v, i, a) {
            if(fotos.includes(v.innerHTML)){
                v.innerHTML = "<img th:src='@{/fotos/"+v.innerHTML+".jpg}' width='40px' height='40px'/>";
            }
        });
    }

Las imágenes se ven así:

introducir la descripción de la imagen aquí

Este es lo que me da cuando inspecciono la pagina: introducir la descripción de la imagen aquí

Alguna idea? Muchas gracias desde ya

Esta es la plantilla index.html que utilizo, no entiendo el porque no renderiza las imagenes en la tabla, he probado poner el mismo tag : img en dicha plantilla y muestra todo bien, obviamente poniendo el nombre del archivo jpg en vez de el v.innerHTML que es el que corresponderia a cada foto de cada alumno, el cual tengo almacenado en un string array llamado fotos.

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">

    <!--/*/ <th:block th:include="top :: top"></th:block> /*/-->

    <body>

        <div class="container">

            <!--/*/ <th:block th:include="header :: header"></th:block> /*/-->

            <!-- ============================================================= -->
            <!-- Inicio Zona de Ajuste -->

            <div class="row">

                <div class="col-sm-5">
                    <div th:value="${fotos}"></div>
                    <form class="form-horizontal" th:object="${entity}" th:action="@{/alumnos/search}" method="post">
                        <div class="row">
                            <div class="col-sm-10">
                                <input placeholder="Filtrar por apellido" type="text" class="form-control" th:field="*{apellido}"/>
                            </div>
                            <div class="col-sm-1">
                                <button type="submit" class="btn btn-success">Buscar</button>
                            </div>
                        </div>
                    </form>

                </div>
                <div class="col-sm-1">                    
                    <a class="btn btn-info" th:href="${'/cooperadoracomercio/alumnos/refresh/'}">Refrescar</a>
                </div>
                <div class="col-sm-1">
                    <a class="btn btn-default" th:href="${'/cooperadoracomercio/alumnos/create/0'}">Nuevo</a>
                </div>
                <div class="col-sm-11">
                    <h5 style="color:red;" th:text="${message}"></h5>
                </div>             
            </div>

            <br/>
            <img th:src='@{static/GonzaloVitti.jpg}' width='40px' height='40px'/>
            <div th:if="${not #lists.isEmpty(entities)}">
                <input type="hidden" id="fotos" th:value="${fotos}"/>
                <table class="table table-condensed table-hover table-striped" width="100%">
                    <tr>
                        <th style="text-align: center">Foto</th>  
                        <th style="text-align: center">Nombre</th>                
                        <th style="text-align: center">Apellido</th>
                        <th style="text-align: center">Documento</th>
                        <th style="text-align: center">Año de ingreso</th>
                        <th style="text-align: center">Email</th>
                        <th style="text-align: center">Localidad</th>
                        <th style="text-align: center">Sexo</th>
                        <th style="text-align: center">Carrera</th>
                        <th style="text-align: center"></th>
                        <th style="text-align: center">Gestionar</th>
                        <th style="text-align: center"></th>
                    </tr>

                    <tr th:each="entity : ${entities}">
                        <td style="text-align: center; vertical-align: middle" class="imagen" th:text="${entity.nombrec}"></td>
                        <td style="text-align: center; vertical-align: middle" th:text="${entity.nombre}"></td>
                        <td style="text-align: center; vertical-align: middle" th:text="${entity.apellido}"></td>
                        <td style="text-align: center; vertical-align: middle" th:text="${entity.nroDoc}"></td>
                        <td style="text-align: center; vertical-align: middle" width="10%" th:text="${entity.anioIng}"></td>
                        <td style="text-align: center; vertical-align: middle" th:text="${entity.email}"></td>
                        <td style="text-align: center; vertical-align: middle" th:text="${entity.localidad.descrip}"></td>
                        <td style="text-align: center; vertical-align: middle" th:text="${entity.sexo.descrip}"></td>
                        <td style="text-align: center; vertical-align: middle" th:text="${entity.carrera.descrip}"></td>
                        <td style="vertical-align: middle" width="5%"><a class="btn btn-info" th:href="${'/cooperadoracomercio/alumnos/subir/' + entity.id}">Agregar foto</a></td>
                        <td style="vertical-align: middle" width="5%"><a class="btn btn-warning" th:href="${'/cooperadoracomercio/alumnos/edit/' + entity.id}">Editar</a></td>
                        <td style="vertical-align: middle" width="5%"><a class="btn btn-danger" th:onclick="'javascript:jsdelete('+ *{entity.id} +')'">Borrar</a></td>
                    </tr>                    
                </table>                

            </div>

            <!-- Fin Zona de Ajuste -->
            <!-- ============================================================= -->

            <div th:if="${page != null}">
                <div class="col-sm-7">
                    <!-- Pagination Bar -->
                    <div th:fragment='paginationbar'>
                        <div class="text-center">
                            <ul class='pagination pagination-centered'>
                                <li th:class="${page.firstPage}?'disabled':''">
                                    <span th:if='${page.firstPage}'>← Primera</span>
                                    <a th:if='${not page.firstPage}' th:href='@{${page.url}(page=0,size=${page.size})}'>←
                                        Primera</a>
                                </li>
                                <li th:class="${page.hasPreviousPage}? '' : 'disabled'">
                                    <span th:if='${not page.hasPreviousPage}'>«</span>
                                    <a th:if='${page.hasPreviousPage}'
                                       th:href='@{${page.url}(page=${page.number-2},size=${page.size})}'
                                       title='Go to previous page'>«</a>
                                </li>
                                <li th:each='item : ${page.items}' th:class="${item.current}? 'active' : ''">
                                    <span th:if='${item.current}' th:text='${item.number}'>1</span>
                                    <a th:if='${not item.current}'
                                       th:href='@{${page.url}(page=${item.number-1},size=${page.size})}'><span
                                            th:text='${item.number}'>1</span></a>
                                </li>
                                <li th:class="${page.hasNextPage}? '' : 'disabled'">
                                    <span th:if='${not page.hasNextPage}'>»</span>
                                    <a th:if='${page.hasNextPage}'
                                       th:href='@{${page.url}(page=${page.number},size=${page.size})}'
                                       title='Go to next page'>»</a>
                                </li>
                                <li th:class="${page.lastPage}? 'disabled' : ''">
                                    <span th:if='${page.lastPage}'>Ultima →</span>
                                    <a th:if='${not page.lastPage}'
                                       th:href='@{${page.url}(page=${page.totalPages - 1},size=${page.size})}'>Ultima →</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </body>

</html>

<script th:inline="javascript">

    /*<![CDATA[*/

    function jsdelete(id) {

        if (confirm('¿ Seguro para Eliminar Registro ?')) {
            var host = location.protocol + '//' + location.host + '/cooperadoracomercio' + '/alumnos/delete/' + id;
            window.location.href = host;
        }

    }

    function jsimagen() {
        
        var fotos = document.getElementById('fotos').value;
        var arr = document.getElementsByClassName('imagen');
        arr = [].slice.call(arr); //I have converted the HTML Collection an array
        arr.forEach(function (v, i, a) {
            if(fotos.includes(v.innerHTML)){
                v.innerHTML = "<img th:src='@{/static/"+v.innerHTML+".jpg}' width='40px' height='40px'/>";
            }
        });
    }
    window.onload = jsimagen();

    /*]]>*/
</script> 

5
  • ¿En qué momento se ejecuta o se llama a la función jsimagen()? Para que puedas utilizar el espacio de nombre de thymeleaf th: en código javascript éste tiene que estar dentro de un bloque <script th:inline="javascript"> el 11 mar. 2020 a las 3:21
  • Hola, lo ejecuto con window.onload, aparte de lo que dices tengo el th:inline "javascript" puesto en la etiqueta script el 11 mar. 2020 a las 12:55
  • Si pero estas añadiendo la imagen una vez que el template thymeleaf se cargó. Supongo que la tabla la estás creando mediante un th:each cierto? Si es asi ¿por qué no resuelves la imagen en ese punto. Las listas que utilizas de algún modo ya las tienes al generar la tabla. En todo caso podrias ponerme template que genera el html? el 11 mar. 2020 a las 15:00
  • Lo otro es que te olvides de th:src y utilices el tag img tal cual el 11 mar. 2020 a las 15:02
  • Juan, agregue el codigo que me pediste, he probado hacerlo sin el th: pero no me muestra, por mas que agregue en el registry classpath la direccion entera de la carpeta fotos. el 11 mar. 2020 a las 17:26

1 respuesta 1

0

Para agregar la imagen, quita el javascript y modifica la primera celda de la tabla como se muestra lineas abajo. Se supone que fotos viene desde el controlador y es una variable List<String>. Por otro lado, el input type=hidden me parece que ya lo puedes quitar.

En la celda se define la variable imagen que contendrá el nombre de la foto que esta compuesto por el nombre completo más la extension .jpg. Luego el img y el span se condicionan a si existe la persona en la lista de fotos o no, de manera que muestre la foto o la imagen. El span lo puedes quitar porque el nombre ya se muestra en las siguientes celdas y con ello la celda de foto quedaría vacia si la persona no tiene foto.




<tr th:each="entity : ${entities}">

    <td  th:with="imagen = ${entity.nombrec} + '.jpg'"> 
        <img th:src="@{'/fotos/' + ${imagen}}"  width='40px' height='40px' th:unless="${not #lists.contains(fotos,entity.nombrec)}"/>
        <span th:text="${entity.nombrec}" th:unless="${#lists.contains(fotos,entity.nombrec)}" ></span>
     </td>


1
  • Muchas gracias!!!!!!, funciona perfectamente. el 13 mar. 2020 a las 15:42

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.