这里需要帮助。我想在“card_img”类中显示图像，但没有显示任何内容。我有这样的HTML代码：

<section class="cards">
        {% for recipe in recipes %}
        {% if recipe.category == 'drink' %}
        <article class="card card--1">
            <div class="card__info-hover">
                <svg class="card__like" viewBox="0 0 24 24">
                    <path fill="#000000"
                        d="M12.1,18.55L12,18.65L11.89,18.55C7.14,14.24 4,11.39 4,8.5C4,6.5 5.5,5 7.5,5C9.04,5 10.54,6 11.07,7.36H12.93C13.46,6 14.96,5 16.5,5C18.5,5 20,6.5 20,8.5C20,11.39 16.86,14.24 12.1,18.55M16.5,3C14.76,3 13.09,3.81 12,5.08C10.91,3.81 9.24,3 7.5,3C4.42,3 2,5.41 2,8.5C2,12.27 5.4,15.36 10.55,20.03L12,21.35L13.45,20.03C18.6,15.36 22,12.27 22,8.5C22,5.41 19.58,3 16.5,3Z" />
                </svg>
            </div>
            <div class="card__img">
                <img src="{{recipe.image.url}}">
            </div>
            <a href="{% url 'recipe_view' recipe.id %}" class="card_link">
                <div class="card__img--hover"></div>
            </a>
            <div class="card__info">
                <span class="card__category">{{ recipe.category }}</span>
                <h3 class="card__title">{{ recipe.title }}</h3>
                <span class="card__by">by <a href="#" class="card__author" title="author">{{ recipe.user }}</a></span>
            </div>
        </article>
        {% endif %}
        {% endfor %}
    </section>

在最初的设计中，图像url是从CSS调用的，如下所示：

.card--1 .card__img,
.card--1 .card__img--hover {
    background-image: url('https://images.pexels.com/photos/45202/brownie-dessert-cake-sweet-45202.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260');
}

在浏览器的开发人员工具中，图像已正确链接。image of dev tool code
有什么想法吗
显示recipe类中的图像