Изображение, загруженное из базы данных Firebase Realtime, не открывается в модальном режиме, в то время как жестко закодированное изображение с теми же кодовыми словами прекрасно - PullRequest
Новая
       34

Изображение, загруженное из базы данных Firebase Realtime, не открывается в модальном режиме, в то время как жестко закодированное изображение с теми же кодовыми словами прекрасно

0 голосов
/ 11 октября 2019

Я загружаю изображения из моей базы данных Firebase Realtime, и они не работают с javascript на странице. Это странно, потому что, если я жестко закодирую изображение на веб-сайте, изображение будет выглядеть как положено, и откроется как модальное. Однако, когда я динамически генерирую тот же код javascript при чтении изображения из моей базы данных, изображение не открывается как модальное.

Javascript на моей html-странице для взаимодействия с изображениями 

<script>
// Get the modal
var modal = document.getElementById('myModalPic');

// Get the image and insert it inside the modal - use its "alt" text as a caption
//var modal = $('.myModalPic')
var img = $('.myImg');
var modalImg = $(".img");
var imageInfo = $('.imageInformation');
var captionText = document.getElementsByClassName("caption");
$('.myImg').click(function(){
    modal.style.display = "block";
    var newSrc = this.src;
    modalImg.attr('src', newSrc);
    //captionText.innerHTML = this.imageInfo.innerHTML;
});

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("closeModal")[0];

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}

</script>

HTML (жестко запрограммированного) изображения, которое содержит слова, которые должны: 

<div class="col-xl-4 col-xs-12 imageGrid">

<img class="myImg" src="../Images/TestContainer.png" alt="Test" width="300" height="200">
 <div id="myModalPic" class="modal">
<span class="closeModal" onclick="document.getElementById('myModal').style.display='none'">&times;</span>
   <img class="modal-content img">
 <div class="caption">
   <span>Title: </span></br>
  <span>Dimensions: </span></br>
<span>Medium:<span>
</div>
  </div>  
 </div>

Динамически генерируемый код, который происходит при загрузке изображения из базы данных 

<div class="col-xl-4 col-xs-12 imageGrid">

 <img class="myImg" src="https://firebasestorage.googleapis.com/v0/b/PrivatInformation/o/uploadedImages%2F1.PNG?alt=media&amp;token=7915c01e-f553-497e-b6a2-2b8dd1f21bac" width="300" height="200">" alt="Test" width="300" height="200">
 <div id="myModalPic" class="modal">
<span class="closeModal" onclick="document.getElementById('myModal').style.display='none'">&times;</span>
<img class="modal-content img">
 <div class="caption">
<span>Title: </span></br>
<span>Dimensions: </span></br>
<span>Medium:<span>
 </div>
   </div>  
</div>
...