Изменение атрибута src изображения при изменении свойства location.hash

72
28 февраля 2021, 16:30

Есть код <img src="">, вместо изображения нужно как-то вставить код JS:

$(window).bind('hashchange', function() {
  document.write(location.hash.slice(1));
});

Сделать это нужно для того, чтобы при добавлении хэша менялось изображение. Если ставлю код как обычный путь к изображению, ничего не работает.

Как это сделать?

Answer 1

Можно заранее определить какому hash будет соответствовать изображение, чтобы не ставить полный путь к изображению в hash.

// Объект с изображениями. 
var sources = { 
  123: 'https://via.placeholder.com/388x188/9B59B6/FFFFFF?text=Изображение+1', 
  456: 'https://via.placeholder.com/388x188/2ECC71/FFFFFF?text=Изображение+2', 
  789: 'https://via.placeholder.com/388x188/82A43A/FFFFFF?text=Изображение+3', 
  1024: 'https://via.placeholder.com/388x188/100E17/FFFFFF?text=Изображение+4' 
}; 
 
// Данный метод запускается при изменении `hash`. 
$(window).on('hashchange', function() { 
  // Отрезаем часть `hash`, начиная с индекса 1. 
  var part = window.location.hash.slice(1); 
 
  // Если в объекте `sources` есть свойство, 
  // соответствующее `hash`. 
  if (part in sources) { 
    // Выбираем изображение 
    // из объекта с изображениями. 
    var image = sources[part]; 
 
    // Меняем изображение. 
    $('img').attr('src', image); 
 
    // Меняем фоновое изображение. 
    // $('body').css('background-image', 'url(' + image + ')'); 
  } 
});
<a href="#123">Изображение 1</a> 
<a href="#456">Изображение 2</a> 
<a href="#789">Изображение 3</a> 
<a href="#1024">Изображение 4</a> 
<a href="#102">Не существующее</a> 
 
<hr> 
 
<img src="https://via.placeholder.com/388x188/9B59B6/FFFFFF?text=Начальное+изображение"> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Либо ставить в hash только имя файла, а при изменении hash формировать полный путь:

// Данный метод запускается при изменении `hash`.
$(window).on('hashchange', function() {
    // Отрезаем часть `hash`, начиная с индекса 1.
    var part = window.location.hash.slice(1);
    // Меняем изображение.
    $('img').attr('src', 'путь/до/изображения/' + part);
});
Answer 2

наверное Вы что-то такое ищете? нажмите выполнить несколько раз и увидите разные картинки, основанные на случайном числе

let hash = Math.floor(Math.random()*1111)+1; 
img.src = `http://www.gravatar.com/avatar/${hash}?r=PG&s=128&default=identicon`;
<img id="img">