Блог

Не могли бы вы объяснить, для чего используются знаки добавления в "url(" previewPic.src ")" в синтаксисе html ниже?

 function upDate(previewPic){
  document.getElementById('image').innerHTML=previewPic.alt;
  document.getElementById('image').style.backgroundImage="url("   previewPic.src   ")";
}
  

 document.getElementById('image').style.backgroundImage="url(images.google.com/xxx)";
  

Приведенный выше результат является ожидаемым, но вы не жестко кодируете источник изображения images.google.com/xxx . Поэтому мы заменяем его переменной, подобной приведенной ниже, и используем конкатенацию строк для их объединения.

 const previewPic = {
  src: 'images.google.com/xxx'
}

document.getElementById('image').style.backgroundImage="url("   previewPic.src   ")";
  

И современный подход также может использовать интерполяцию строк, как показано ниже

 document.getElementById('image').style.backgroundImage=`url(${previewPic.src})`;
  

В основном изменение заключается в том, что вместо double-quote на back-ticks и вы больше не видите знака, вы можете заменить переменную на ${} symbol