Usando el atributo de datos HTML para establecer la URL de la imagen de fondo CSS

Planeo construir una galería de fotos personalizada para un amigo y sé exactamente cómo voy a producir el HTML, sin embargo, me encuentro con un pequeño problema con el CSS.
(Preferiría que el estilo de la página no dependa de jQuery si es posible)

y supongo que el CSS debería verse así:

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

Aquí hay un Codepen Pen para obtener un ejemplo dinámico de lo que estoy buscando:
http://codepen.io/thestevekelzer/pen/rEDJv

Eventualmente podrás usar

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

pero que yo sepa, aún no se ha implementado en ninguna parte. En lo anterior, urles un parámetro opcional "tipo o unidad" para attr(). Consulte https://drafts.csswg.org/css-values/#attr-notation .

Si desea mantenerlo solo con HTML y CSS, puede usar Variables CSS. Tenga en cuenta que las variables CSS no son compatibles con IE .

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

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

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

No es una buena práctica mezclar contenido con estilo, pero una solución podría ser

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

Necesitará un poco de JavaScript para eso:

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

Envuelva eso en <script>etiquetas en la parte inferior justo antes de la </body>etiqueta o envuelva en una función que llame una vez que se cargó la página.

¿Qué tal si usas algo de Sass? Esto es lo que hice para lograr algo como esto (aunque tenga en cuenta que debe crear una lista Sass para cada uno de los atributos de datos).

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

Esencialmente, enumera todos sus valores de atributos de datos. Luego use Sass @each para iterar y seleccionar todos los atributos de datos en el HTML. Luego, ingrese la variable de iterador y haga que coincida con un nombre de archivo.

De todos modos, como dije, debe enumerar todos los valores, luego asegúrese de que sus nombres de archivo incorporen los valores en su lista.

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

});

Demostración en JSFiddle

También puede hacer esto con JavaScript.

Para aquellos que quieren una respuesta tonta como yo

Algo así como pasos como 1, 2, 3

Aquí está lo que hice

Primero crea el marcado HTML

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

Luego, antes de su etiqueta de cuerpo final, agregue este script

Incluí el cuerpo final en el código a continuación como ejemplo

Así que ten cuidado cuando copias

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

CÓDIGO 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>

CÓDIGO 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";