Verwenden des HTML-Datenattributs zum Festlegen der CSS-Hintergrundbild-URL

Ich habe vor, eine benutzerdefinierte Fotogalerie für einen Freund zu erstellen, und ich weiß genau, wie ich den HTML-Code erstellen werde. Ich habe jedoch ein kleines Problem mit dem CSS.
(Ich würde es vorziehen, wenn das Seiten-Styling nicht auf jQuery basiert, wenn möglich)

und ich gehe davon aus, dass das CSS ungefähr so ​​aussehen sollte:

.thumb {
    width:150px;
    height:150px;
    background-position:center center;
    overflow:hidden;
    border:1px solid black;

    background-image: attr(data-image-src);/*This is the question piece*/
}

Hier ist ein Codepen-Stift, um ein dynamisches Beispiel für das zu erhalten, wonach ich suche:
http://codepen.io/thestevekelzer/pen/rEDJv

Sie werden schließlich in der Lage sein, zu verwenden

background-image: attr(data-image-src url);

aber das ist meines wissens noch nirgends umgesetzt. Oben urlist ein optionaler "Typ-oder-Einheit" -Parameter zu attr(). Siehe https://drafts.csswg.org/css-values/#attr-notation .

Wenn Sie es nur mit HTML und CSS behalten möchten, können Sie CSS-Variablen verwenden. Beachten Sie, dass CSS-Variablen im IE nicht unterstützt werden .

<div class="thumb" style="--background: url('images/img.jpg')"></div> 

.thumb {
    background-image: var(--background);
}

Codepen: https://codepen.io/bruce13/pen/bJdoZW

Es ist nicht empfehlenswert, Inhalte mit Stil zu verwechseln, aber eine Lösung könnte sein

<div class="thumb" style="background-image: url('images/img.jpg')"></div>

Dafür benötigen Sie ein wenig JavaScript:

var list = document.getElementsByClassName('thumb');

for (var i = 0; i < list.length; i++) {
  var src = list[i].getAttribute('data-image-src');
  list[i].style.backgroundImage="url('" + src + "')";
}

Wickeln Sie das in <script>Tags unten kurz vor dem </body>Tag ein oder in eine Funktion, die Sie nach dem Laden der Seite aufrufen.

Wie wäre es mit etwas Sass? Hier ist, was ich getan habe, um so etwas zu erreichen (obwohl zu beachten ist, dass Sie für jedes der Datenattribute eine Sass-Liste erstellen müssen).

/*
  Iterate over list and use "data-social" to put in the appropriate background-image.
*/
$social: "fb", "twitter", "youtube";

@each $i in $social {
  [data-social="#{$i}"] {
    background: url('#{$image-path}/icons/#{$i}.svg') no-repeat 0 0;
    background-size: cover; // Only seems to work if placed below background property
  }
}

Im Wesentlichen listen Sie alle Ihre Datenattributwerte auf. Verwenden Sie dann Sass @each, um alle Datenattribute im HTML-Code zu durchlaufen und auszuwählen. Bringen Sie dann die Iteratorvariable ein und lassen Sie sie mit einem Dateinamen übereinstimmen.

Wie gesagt, Sie müssen alle Werte auflisten und dann sicherstellen, dass Ihre Dateinamen die Werte in Ihrer Liste enthalten.

HTML

<div class="thumb" data-image-src="img/image.png">

jQuery

$( ".thumb" ).each(function() {
  var attr = $(this).attr('data-image-src');

  if (typeof attr !== typeof undefined && attr !== false) {
      $(this).css('background', 'url('+attr+')');
  }

});

Demo auf JSFiddle

Sie können dies auch mit JavaScript tun.

Für diejenigen, die eine dumme Antwort wie ich wollen

So etwas wie Schritte wie 1, 2, 3

Hier ist es was ich getan habe

Erstellen Sie zuerst das HTML-Markup

<div class="thumb" data-image-src="images/img.jpg"></div>

Fügen Sie dann vor Ihrem Endkörper-Tag dieses Skript hinzu

Ich habe den Endkörper als Beispiel in den folgenden Code aufgenommen

Seien Sie also vorsichtig, wenn Sie kopieren

<script>
var list = document.getElementsByClassName('thumb');

for (var i = 0; i < list.length; i++) {
  var src = list[i].getAttribute('data-image-src');
  list[i].style.backgroundImage="url('" + src + "')";
}
</script>

</body>

HTML QUELLTEXT

<div id="borderLoader"  data-height="230px" data-color="lightgrey" data- 
width="230px" data-image="https://fiverr- res.cloudinary.com/t_profile_thumb,q_auto,f_auto/attachments/profile/photo/a54f24b2ab6f377ea269863cbf556c12-619447411516923848661/913d6cc9-3d3c-4884-ac6e-4c2d58ee4d6a.jpg">

</div>

JS CODE

var dataValue, dataSet,key;
dataValue = document.getElementById('borderLoader');
//data set contains all the dataset that you are to style the shape;
dataSet ={ 
   "height":dataValue.dataset.height,
   "width":dataValue.dataset.width,
   "color":dataValue.dataset.color,
   "imageBg":dataValue.dataset.image
};

dataValue.style.height = dataSet.height;
dataValue.style.width = dataSet.width;
dataValue.style.background = "#f3f3f3 url("+dataSet.imageBg+") no-repeat 
center";