I wonder if there is a solution to the following problem,
If there is a company logo, consider it and apply it to css, if there is no use of logo_default, then I could control versions and my users could customize the application without fear of replacing the files and returning to default, is there any solution in css?
@renan's response to multiple backgrounds could solve My problem, however, is when loading background images transparent images blending.
In the OS response: Fallback image and timeout - External Javascript Content
I found a solution in javascript that solves the problem perfectly, it would check if the image exists, and in onerror() it puts the other message.
Example:
Javascript - jQuery:
function checkImage(imagemDefault, imagemEmpresa) {
var img = new Image();
img.src = imagemDefault;
img.onload = function() {
$('#logo').attr('src', imagemDefault);
};
img.onerror = function() {
$('#logo').attr('src', imagemEmpresa);
};
}
var imagemDefault = 'imagemDefault.png';
var imagemEmpresa = 'imagemEmpresa .png';
checkImage(imagemDefault, imagemEmpresa);
HTML:
<img id="logo" alt="" />
Example working on jsfiddle
The only way I know it is by server-side . PHP , for example.
You can use PHP to check if the logo_empresa.png image exists in the directory. If so, show. If not, show logo_default.png .
Use the file_exists function to do this. link
But then you have to do this in HTML and do via Style in the HTML tag.
if(file_exists('img/imagem.png'))
echo '<div style="background-image:url(<?php echo $var; ?>)"> Teste </div>';
else
echo '<div style="background-image:url('imagem_padrao.png')"> Teste ';</div>
Out of curiosity I went to search and found this article: link
You can do with multiple backgrounds .
The background property accepts multiple stacked layers as layers, layered over each other.
You can take advantage of this by defining the image that has the possibility of failing (not existing) as the first layer of background. If there are other images, you can put them in sequence but leave the last layer with the default image to be used if all the previous ones will fail.
In case the first is not found, the second will be used. If you have multiple images, the first one that does not crash will be searched in sequential order.
.logo {
width: 235px;
height: 90px;
background: url('imagemQueVaiFalhar.png'),
url('http://i.stack.imgur.com/pqk9d.png'); /* default */
}<div class='logo'></div>It is possible to have a base64 image, in case the second image has also been deleted, perhaps by accident. But there are a few factors to consider, especially in older browsers. Still, here is an example:
.logo {
width: 235px;
height: 90px;
background: url('imagemQueNuncaVaiExistir.jpg'),
url('imagemQueSubstituiAPrimeira.jpg'),
url('imagemColoqueiPorDefaultEOUsuarioApagou.png'),
url('data:image/png;base64,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');
}<div class='logo'></div>