How to load local files (img) in RMarkdown with htmltools::includeHTML

I'm rendering an HTML document via RMarkdown using:

htmltools::includeHTML("index.html")

My index.html is basically set up like this:

    <!-- Clicking the button changes the image displayed-->
    <label class="btn btn-default active" id="my_button">
          <input class="btn" type="radio" name="options" autocomplete="off" > This Displays Other Image
        </label>

    <div class="container" style="padding-bottom:0px">
      <div class="row" id="od-content">
        <div class="col-md-10"> 
            <h2 class="mb-3">Title</h2> 
                <p>
                   Blah blah blah
                </p>
                <p class="viz-photo">             
                    <div class="col-12"> 
                        <img class="img-fluid viz" src="img/image_1.png" alt="Card image cap">
                    </div>
                </p>
        </div> 
      </div>
    </div>
  </div>
     
  <script src="js/main.js"></script>

In main.js, it's basically set up so that the HTML image changes when a button is pressed:

var special_content = '<div class="col-md-10">' + 
                            '<h2 class="mb-3">Special Title!</h2>' +    
                            '<p>' +
                                'Blah blah' +
                            '</p>' +
                            '<p class="viz-photo">' +             
                                '<div class="col-12">' + 
                                    '<img class="img-fluid viz" src="img/image_2.png" alt="Card image cap">' +
                                '</div>' +
                            '</p>' +
                          '</div>' 


$(document).ready(function(){ 
  $('#my_button').on('click', function(e) {

  
  document.getElementById("od-content").innerHTML = special_content;
  });
});

So, if I render to HTML, the index.html shows the first image just fine. But, when I click the button, the second image cannot be found (the one referenced in the javascript). The javascript code is working because the text is updating. It's only the image that is failing.
When I inspect img_1, I see:

When I inspect the broken image_2, I see that the src is still using the local "img" folder.

So, somehow, R Markdown is packaging the first image somehow to be self-contained, but not the second image?

Both images are local and stored in the img folder. So, RMarkdown is able to render image_1 but not image_2. My file structure is as follows:

My_Folder
    -img folder
         -image_1.png
         -image_2.png
    -CSS folder
    -js folder
         -main.js
    -index.html
    -my_rmarkdown.RMD
     

I've also tried this with no luck:

render("my_rmarkdown.Rmd", html_document(pandoc_args = "--self-contained"))

So, why is this happening? It must be the way that Rmarkdown is packaging and rendering the files.

from How to load local files (img) in RMarkdown with htmltools::includeHTML