Добавление атрибута sr c к iframe загружает файл, и файл не отображается на странице html

Question

У меня есть список имен файлов, которые я извлекаю из моего бэкэнда и отображаю в файле e js. У меня есть кнопка для просмотра файлов. При нажатии на кнопку я получаю файл из папки publi c и добавляю его к атрибуту sr c в iframe, который находится во всплывающем окне. Файл не отображается в iframe, а загружается. Почему файл не отображается должным образом и почему он загружает файл?

     <div class="modal fade" id="contractPop" tabindex="-1" role="dialog" aria- 
       labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-xl" role="document">
       <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="titleModal">Contract</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
               <span aria-hidden="true">&times;</span>
            </button>
        </div>
     <div class="modal-body">
       <div class="container">
         <iframe id="contractFile" src="" width="500" height="600" frameborder="0"> 
         </iframe>
       </div>
     </div>
     </div>
     </div>
     </div> 

И функция добавления источника в iframe:

     function showFile(index){
        let filename = document.getElementById('filename'+index).innerText;
        let src = "files/company_contract/" + filename;
        $('#contractPop').modal('show')
        $('#contractFile').attr('src', src)
     }