I need your help, I have a manager table, which I need to show the default photo when I am a new user, in my case I have a manager with a photo and another with a new manager, in the new one the default photo should be seen
In my code I am inserting an if so that it validates the photo that it adds in the database, it shows it if it exists, and if it doesn't, it shows the default one.
var mostrarDirectivos = function() {
var tableDirectivo = $('#dataTableDirectivo').DataTable({
"processing": true,
"serverSide": false,
"ajax": {
"url": "<?php echo constant('URL'); ?>directivo/readtable"
},
"columns": [{
defaultContent: "",
'render': function(data, type, JsonResultRow, meta) {
var fullnameImagen = JsonResultRow.appaterno_director + '_' + JsonResultRow.apmaterno_director + '_' + JsonResultRow.nombre_director + '/' + JsonResultRow.foto_director;
var img = '<?php echo constant('URL'); ?>public/director/';
if(img == null){
var fullnameImagen = JsonResultRow.appaterno_director + '_' + JsonResultRow.apmaterno_director + '_' + JsonResultRow.nombre_director + '/' + JsonResultRow.foto_director;
if(!file_exists(img)){
var img = '<?php echo constant('URL'); ?>public/director/';
}else{
var img = JsonResultRow.appaterno_director + '_' + JsonResultRow.apmaterno_director + '_' + JsonResultRow.nombre_director + '/' + JsonResultRow.foto_director;
}
}else{
var img = '<?php echo constant('URL'); ?>public/img/default.jpg';
return '<center><img src="' + img + '" class="rounded-circle img-fluid " style="width: 50px; height: 50px;"/></center>';
}
}
},
{
defaultContent: "",
"render": function(data, type, full) {
return full['nombre_director'] + ' ' + full['appaterno_director'] + ' ' + full['apmaterno_director'];
}
},
{
"data": "telefono_director"
},
{
"data": "cedulaprofesional_director"
},
{
data: null,
"defaultContent": `<button class='consulta btn btn-primary' data-toggle='modal' data-target='#modalDetalleDirectivo' title="Ver Detalles"><i class="fa fa-eye"></i></button>
<button class='editar btn btn-warning' data-toggle='modal' data-target='#modalActualizarDirectivo' title="Editar Datos"><i class="fa fa-edit"></i></button>
<button class='eliminar btn btn-danger' data-toggle='modal' data-target='#modalEliminarDirectivo' title="Eliminar Registro"><i class="far fa-trash-alt"></i></button>`
}
],
"fnFooterCallback": function(nRow, aaData, iStart, iEnd, aiDisplay) {
if (aiDisplay.length > 0) {
$('body').removeClass('no-record');
} else {
$('body').addClass('no-record');
}
},
responsive: true,
autoWidth: false,
language: idiomaDataTable,
lengthChange: true,
buttons: ['copy', 'excel', 'csv', 'pdf', 'colvis'],
dom: 'Bfltip'
});
obtenerdatosDT(tableDirectivo);
}
Try removing all of this:
and replace it with this:
Explanation of the error
Your code above was working badly and always displaying the default image because just before the conditional, where you check this:
you define what is
img
like this:therefore it could never be null and therefore it always executed the second part of the conditional, putting the default image like this:
Solution Explanation
Since we're interested in knowing if the image exists, in my solution I create a new javascript HTML image object instance with new Image() :
which, out of the box, does not contain anything, and I assign as src= the image that we theoretically want to know if it exists through:
where urlImg corresponds to the supposed path that the image should have (if it exists) and that I have defined a line before with:
Once this is done, which does not give any error exists or does not exist, one of the ways to check if it exists is to look at its height. Being an image, its height must be greater than 0, otherwise nothing would be seen, so I use that hypothesis to carry out the following conditional:
If the result of that property is 0, then the image does not exist, and therefore the default image should be set:
and an else is not needed because if it exists then urlImg is already well placed from before. And finally I return the entire structure of the image just as you did in your code:
I hope the explanation has served you and you have understood both the error and the solution.