cover image by default css

Question

cover image by default css

Navigation

#1 by (2 votes)
#2 by (0 votes)

1

I have a div that is armed by Javascript and a JSON, this puts an image that brings it from a server, the problem is that if the image is not, the div remains blank.

- UPDATE -

I do not have the URL in the database, it is assembled in a static way together with the element ID. I do not have access to the route, I just want to check if it exists I put the photo, if it does not exist I put a default one

  for (var i = 0; i < data.features.length; i++)
  {
        var precio = parseFloat(data.features[i].properties.precio);
        if (precio != '')
           precio = '$' + precio.toFixed(0).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");
         else
          precio = 'Sin precio';

        h += '<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 propDetails"' +
        'style="background-image: url(\'ruta/images/'+ data.features[i].properties.id +'/foto_principal.jpg\')">' +
            '<img class="fav" src="../images/favorito.png">' +
              '<div class="details">' +
                  '<p class="dom"><span>'+ precio +'</span><br>'+ data.features[i].properties.calle +'</p>' +
              '</div>' +
        '</div>';
  }

To put this by default I tried to do this in CSS

.propDetails
{
  background-image: url(../images/default.png);
}

You're not doing what I'm trying to do What can I implement?

javascript css

asked by Alberto Siurob 21.10.2017 в 01:09

source

2 answers

0

You can check if data.features[i].properties.id is not empty or undefined and thus unify the url and then arm the div with the validated url, try this:

for (var i = 0; i < data.features.length; i++){
                var precio = parseFloat(data.features[i].properties.precio);
                if (precio != '') {
                    precio = '$' + precio.toFixed(0).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");
                } else {
                    precio = 'Sin precio';                              
                }
                if (data.features[i].properties.id != "") { 
                    var urlImage = data.features[i].properties.id +'/foto_principal.jpg';
                } else {
                    var urlImage = 'default.png';
                }
                h += '<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 propDetails"' +
                'style="background-image: url(ruta/images/'+ urlImage + ')">' +
                '<img class="fav" src="../images/favorito.png">' +
                '<div class="details">' +
                '<p class="dom"><span>'+ precio +'</span><br>'+ data.features[i].properties.calle +'</p>' +
                '</div>' +
                '</div>';
            }

I hope it serves you.

answered by 21.10.2017 в 01:28

Date in javascript [closed] Obtain control of an IMAGEVIEW CONTROL

score 2 · Accepted Answer

In CSS you can define more than one background image in background-image separated by commas. Something like this, the first image of the list is the one that will appear in front, and if it fails the last one will be displayed:

div {
  width: 300px;
  height: 200px;
  background-image: url(url-que-no-existe),
                    url(http://lorempixel.com/300/200/cats);
}

<div>
</div>

Then in your code what you have to do is add a default image to the end of the list of background-image such that:

h += '<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 propDetails"' +
    'style="background-image: url(\'ruta/images/'+ data.features[i].properties.id +'/foto_principal.jpg\'), url(../images/default.png)">' +
        '<img class="fav" src="../images/favorito.png">' +
          '<div class="details">' +
              '<p class="dom"><span>'+ precio +'</span><br>'+ data.features[i].properties.calle +'</p>' +
          '</div>' +
    '</div>';