Використання HTML-атрибута даних для встановлення URL-адреси фонового зображення CSS

Я планую створити власну фотогалерею для друга, і я точно знаю, як буду створювати HTML, проте я стикаюся з невеликою проблемою з CSS.
(Я б вважав за краще, щоб стиль сторінки не покладався на jQuery, якщо це можливо)

і я припускаю, що CSS повинен виглядати приблизно так:

.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*/
}

Ось Codepen Pen, щоб отримати динамічний приклад того, що я шукаю:
http://codepen.io/thestevekelzer/pen/rEDJv

Зрештою ви зможете використовувати

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

але це ще ніде не реалізовано, наскільки мені відомо. У наведеному вище urlє необов’язковий параметр "type-or-unit" для attr(). Див. Https://drafts.csswg.org/css-values/#attr-notation .

Якщо ви хочете зберегти його лише з HTML і CSS, ви можете використовувати змінні CSS. Майте на увазі, змінні css не підтримуються в IE .

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

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

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

Не найкраща практика змішувати вміст зі стилем, але рішення може бути

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

Для цього вам знадобиться трохи 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 + "')";
}

Оберніть це <script>тегами внизу безпосередньо перед </body>тегом або оберніть функцією, яку ви викликаєте після завантаження сторінки.

Як щодо використання Sass? Ось що я зробив, щоб досягти чогось подібного (хоча зверніть увагу, що вам потрібно створити список Sass для кожного з атрибутів даних).

/*
  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
  }
}

По суті, ви перелічуєте всі свої значення атрибутів даних. Потім використовуйте Sass @each для перебору та вибору всіх атрибутів даних у HTML. Потім введіть змінну-ітератор і нехай вона збігається з іменем файлу.

У будь-якому випадку, як я вже сказав, вам потрібно перерахувати всі значення, а потім переконатися, що ваші імена файлів включають значення у ваш список.

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+')');
  }

});

Демонстрація на JSFiddle

Ви можете зробити це також за допомогою JavaScript.

Для тих, хто хоче німий відповідь, як я

Щось на зразок того, як робити кроки як 1, 2, 3

Ось це те, що я зробив

Спочатку створіть розмітку HTML

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

Потім перед кінцевим тегом body додайте цей сценарій

Як приклад, я включив кінцеве тіло до коду нижче

Тому будьте обережні, коли копіюєте

<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-КОД

<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

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";