无法使用 imageUrl 显示模态

Question

我无法使用 imageUrl 显示模式。

我需要使用 JavaScript 显示模态，但直到现在都没有成功。在下面的代码中，我使用 for 循环让所有图片卡片显示在图片库的主页中。但是单击图像卡按钮时无法显示模式。这是包含完整代码的索引页

<!doctype html>
<html lang="en">

<head>

    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
    {% include 'navbarHA.html' %}
    <title>HOBBIESALIVE</title>
    
    <style>
        .bg {
            background: #90caf9 !important;
        }

        .list-group-item.active {
            background: #90caf9 !important;
            border-color: #90caf9 !important;

        }
    </style>




</head>

<body>
    
    <h1> Hello! HOBBIESALIVE :) </h1>

    <!--main code-->

    <div class="row">

        <div class="col-md-2">

            <!--categories-->
            <div class="list-group mt-3">
                <a href="/home" class="list-group-item list-group-item-action active" aria-current="true">
                    All Categories
                </a>

                {% for c in CatsHA %}

                <a href="/category/{{c.pk}}" class="list-group-item list-group-item-action">{{c.cat_title}}</a>
                {% endfor %}
            </div>

        </div>

        <div class="col-md-10 mt-3">

            <!--images-->
            <div class="row row-cols-1 row-cols-md-5 g-4">
                {% for i in imagesHA %}

                <div class="card">
                    <img class="card-img-top" src="/media/{{i.image}}" alt="OOoooppss!!!">
                    <div class="card-body">
                        <h5 class="card-title">{{i.title}}</h5>
                        <p class="card-text">{{i.description}}</p>
                        <a href="#" class="btn btn-primary" onclick="showIMG('{{i.image}}')"> view </a>
                    </div>
                </div>
                {% endfor %}
            </div>

        </div>
    </div>


<!-- Button trigger modal -->
<!-- <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button> -->

<!-- Modal -->


<div class="modal fade" id="image-modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <img src="#!" id="image-show" class="img-fluid" alt="xxMxx">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>






    
 
  
<!-- Optional JavaScript; choose one of the two! -->

<!-- Option 1: Bootstrap Bundle with Popper -->
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4"
    crossorigin="anonymous">
</script> 

<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
-->


<script>

    function showIMG(imageUrl) {

        $('#image-modal').modal('show')
        $('#image-show').attr('src',`/media/${imageUrl}`)  
    }

</script>

</body>

</html>
-----------------------------------------------------------

CONSOLE 


System check identified some issues:

WARNINGS:
HA_app.Category: (models.W042) Auto-created primary key used when not defining a primary key type, by default 'django.db.models.AutoField'.
        HINT: Configure the DEFAULT_AUTO_FIELD setting or the HaAppConfig.default_auto_field attribute to point to a subclass of AutoField, e.g. 'django.db.models.BigAutoField'.
HA_app.Image: (models.W042) Auto-created primary key used when not defining a primary key type, by default 'django.db.models.AutoField'.
        HINT: Configure the DEFAULT_AUTO_FIELD setting or the HaAppConfig.default_auto_field attribute to point to a subclass of AutoField, e.g. 'django.db.models.BigAutoField'.

System check identified 2 issues (0 silenced).
May 31, 2021 - 20:34:40
Django version 3.2, using settings 'HA_proj.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CTRL-BREAK.
[31/May/2021 20:35:03] "GET /home/ HTTP/1.1" 200 9396
[31/May/2021 20:35:03] "GET /home/ HTTP/1.1" 200 9396 ```

Answer 1

Bootstrap 5 设计为在没有 jQuery 的情况下使用，但您仍然可以在页面中加载 jquery，您的脚本将正常工作。但是，如果你想使用bootstrap 5推荐的vanilla js，你需要做的就是将你的模态交互功能更改为this

function showIMG(imageUrl) {
  const myModal = new bootstrap.Modal(document.querySelector('#image-modal'));
  myModal.show();
  document.querySelector('#image-show').setAttribute('src', `/media/${imageUrl}`);
}

无法使用 imageUrl 显示模态

Not able to show modal using imageUrl

javascript

bootstrap-modal