How to use a different logo if the pattern does not exist?

Question

I would like to know if there is a solution to the following problem,

if there is a logo_enterprise image to consider it and apply it to css, if there is no logo_default, that way I could control versions and my users could customise the application without fear of replacing the files and go back to default, there is some solution in css ?

Answer 1

It is possible to do with Multiple backgrounds.

The estate background accepts multiple background planes stacked as if they were layers, staying on top of each other.

You can take advantage of this by defining the image that has the possibility of failing (not existing) as the first background layer. If there are other images, you can put them in sequence but leaving the last layer with the image default to be used if all previous ones fail.

In case the first is not found, the second will be used. If you have multiple images, you will be searched in sequential order for the first that does not fail.

.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 an image in Base64, in case the second image has also been deleted, perhaps by accident. But there is some factors to be considered, especially in older browsers. Still, follow 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>

Answer 2

The only way I know is by server-side. PHP, for example.

You can use PHP to check the image logo_empresa.png exists in the directory. If yes, it shows. If not, it shows logo_default.png.

Use the function file_exists for that reason. http://php.net/manual/en/function.file-exists.php

But then you have to do it in HTML and do it via Style in 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 research and found this article: http://blog.thiagobelem.net/css-dinamico-inserindo-php-no-css/

Answer 3

The @Renan response on Multiple backgrounds could solve my problem, but in uploads of images with background transparent images end up blending.

In the OS response: Fallback image and timeout - External Content Javascript

found a javascript solution that perfectly solves the problem, would be to check if the image exists, and in onerror() her place 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