0

Mi problema es como hago para obtener una imagen que esta dentro de una celda de una tabla al hacer click sobre un botón editar para mostrarla en un modal. Aclaro que las imagenes las recibo de una respuesta AJAX y luego las inserto en una tabla.

Mi tabla es esta: introducir la descripción de la imagen aquí

Mi código para obtener los datos es este:

/* INSERTAR DATOS */
$('#form_categoria').submit(function(e){
    e.preventDefault();
    /* OBTENGO LOS VALORES DEL FORM */  
    let id_form = document.getElementById('form_categoria');
    let formulario_data = new FormData(id_form);
    $.ajax({
        url:'../../services/CRUD/categorias_crud.php',
        method: 'POST',
        data:formulario_data,
        dataType:'json',
        cache: false,
        contentType: false,
        processData: false,
        success: (response)=>{                                                                       
            if(response.status== 'true'){
                Swal.fire({                   
                    icon: 'success',
                    title: 'La categoria '+response.data['nombre_cat']+' ha sido registrado',                                        
                    showConfirmButton: false,
                    timer: 6000
                });                
                tabla_categorias.row.add([
                    response.data['id_cat'],
                    response.data['nombre_cat'],
                    response.data['desc_cat'],
                    response.data['estado_cat']=='0' ? '<span class="badge" style="background-color:#95d5b2; color: #2d6a4f">Activado</span>' : 
                    '<span class="badge" style="background-color:#ff8fa3; color: #a4133c">Desactivado</span>',
                    '<img class="id_cat_'+response.data['id_cat']+' height="50" width="50" src="data:image;base64,'+(response.data["img_cat"])+'"/>'    
                ]).draw();
            }else{
                Swal.fire({
                    icon: 'error',
                    title: 'Oops...',
                    html: response.status,
                    text: 'Hubo un error, vuelve a intentarlo',                    
                });
            }
            console.log(response.status);
        }
    });
    $('#modal_categorias').modal('hide');
});

Mi intento de codigo para obtener la imagen es este

/* EDITAR DATOS */
$(document).on('click','.btn_editar', function(){
   fila = $(this).closest('tr');
   id_cat = parseInt(fila.find('td:eq(0)').text());
   nombre_cat = fila.find('td:eq(1)').text();
   desc_cat = fila.find('td:eq(2)').text();
   estado_cat = fila.find('td:eq(3)').text() == 'Activado' ? 0:1;
   var img = new Image(fila.find('td:eq(4)').attr('src')); //INTENTO DE CONSEGUIR LA IMAGEN
   console.log(img);
   $('#modal_categorias').modal('show');
   $('#modal_categorias #visualiuzacion').append('<img height="50" width="50" src='+img+'/>'); // MUESTRO LA IMAGEN EN EL MODAL
});

No me carga la imagen

introducir la descripción de la imagen aquí

2
  • Prueba sin new Image, parece que no lo necesitas.
    – Sal
    el 17 oct. 2021 a las 1:57
  • Gracias por tu respuesta, ya lo he solucionado, no había puesto la imagen dentro de mi seleccion var img = new Image(fila.find('td:eq(4) img').attr('src')); el 17 oct. 2021 a las 14:13

0

Tu Respuesta

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

Examina otras preguntas con la etiqueta o formula tu propia pregunta.