2
respostas

IMAGEM NÃO APARECE

Estou tentando fazer que a imagem apareça, mas ela nao aparece... tudo aparece menos ela.

index:

{% extends 'base.html' %}
{% load static %}
{% block content %}
    <!-- Preloader -->
    <div id="preloader">
        <i class="circle-preloader"></i>
        <img src="{% static 'img/core-img/pizza.png' %}" alt="">
    </div>

    <!-- Search Wrapper -->
    <div class="search-wrapper">
        <!-- Close Btn -->
        <div class="close-btn"><i class="fa fa-times" aria-hidden="true"></i></div>

        <div class="container">
            <div class="row">
                <div class="col-12">
                    <form action="#" method="post">
                        <input type="search" name="search" placeholder="O que está procurando...">
                        <button type="submit"><i class="fa fa-search" aria-hidden="true"></i></button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    {% include 'partials/menu.html' %}

    <!-- ##### Best Receipe Area Start ##### -->
    <section class="best-receipe-area">
        <div class="container">
            <div class="row">
                {% if receitas %}
                {% for receita in receitas %}
                <!-- Single Best Receipe Area -->
                <div class="col-12 col-sm-6 col-lg-4">
                    <div class="single-best-receipe-area mb-30">
                        {% if receita.foto_receita == '' %}
                            <img src="{% static 'img/bg-img/foto_receita.png' %}" alt="">
                        {% else %}
                            <img src="{{ receita.foto_receita.url }}" alt="">
                        {% endif %}
                            <div class="receipe-content">
                            <a href="{% url 'receita' receita.id %}">
                                <h5>{{ receita.nome_receita }}</h5>
                            </a>
                        </div>
                    </div>
                </div>
                {% endfor %}
                {% else %}
                {% endif %}
            </div>
        </div>
    </section>
    <!-- ##### Best Receipe Area End ##### -->

    {% include 'partials/footer.html' %}
{% endblock %}
2 respostas

receita:


{% extends 'base.html' %}
{% load static %}
{% block content %}
    <!-- Preloader -->
    <div id="preloader">
        <i class="circle-preloader"></i>
        <img src="{% static 'img/core-img/hamburger.png' %}" alt="">
    </div>

    <!-- Search Wrapper -->
    <div class="search-wrapper">
        <!-- Close Btn -->
        <div class="close-btn"><i class="fa fa-times" aria-hidden="true"></i></div>

        <div class="container">
            <div class="row">
                <div class="col-12">
                    <form action="#" method="post">
                        <input type="search" name="search" placeholder="O que está procurando...">
                        <button type="submit"><i class="fa fa-search" aria-hidden="true"></i></button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    {% include 'partials/menu.html' %}

        <!-- Receipe Post Search -->
        <div class="receipe-post-search mb-80">
            <div class="container">
                <form action="#" method="post">
                    <div class="row">
                        <div class="col-12 col-lg-5">
                            <select name="select1" id="select1">
                                <option value="1">Comida típica brasileira</option>
                                <option value="1">Massas</option>
                                <option value="1">Veganas</option>
                            </select>
                        </div>
                        <div class="col-12 col-lg-2 text-right">
                            <button type="submit" class="btn delicious-btn">Buscar</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <!-- Receipe Slider -->
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="receipe-slider owl-carousel">
                        {% if receita.foto_receita == '' %}
                            <img src="{% static 'img/bg-img/tomate_banner.jpg' %}">
                        {% else %}
                            <img src="{{ receita.foto_receita.url }}" alt="">
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>

        <!-- Receipe Content Area -->
        <div class="receipe-content-area">
            <div class="container">

                <div class="row">
                    <div class="col-12 col-md-8">
                        <div class="receipe-headline my-5">
                            <span>{{receita.date_receita}}</span>
                            <h2>{{receita.nome_receita}}</h2>
                            <div class="receipe-duration">
                                <h6>Preparo: {{receita.tempo_preparo}}</h6>
                                <h6>Rendimento: {{ receita.rendimento }}</h6>
                                <h6>Categoria: {{receita.categoria}} </h6>
                                <h6>Por: {{ receita.pessoas }}</h6>
                            </div>
                        </div>
                    </div>

                <div class="row">
                    <div class="col-12 col-lg-8">
                        <!-- Single Preparation Step -->
                        <div class="single-preparation-step d-flex">
                            <p>{{ receita.modo_preparo }} </p>
                        </div>
                    </div>

                    <!-- Ingredientes -->
                    <div class="col-12 col-lg-4">
                        <div class="ingredients">
                            <h4>Ingredientees</h4>
                            <div class="ingredients">
                                <p>{{ receita.ingredientes }} </p>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Ingredientes -->

    {% include 'partials/footer.html' %}
                    {% endblock %}

Olá Victor, tudo bem com você?

Peço desculpas pela demora em lhe responder.

Realizando teste com o código apresentado as imagens foram exibidas de forma correta. Peço que verifique se ocorreu o envio das imagens na página do administrador. Para isso, você pode seguir o passo a passo abaixo.

  • Inicie o servidor, executando o comando python manage.py runserver no terminal aberto na pasta do projeto.

  • Abra a página do administrador, basta inserir /admin ao final do link no navegador.

  • Na janela pop-up que será aberta, informe o login e senha do administrador, clique em Acessar.

  • À esquerda da tela, escolha as opções de receitas e clique em modificar.

  • Será aberta a janela contendo as receitas cadastradas, escolha uma receita, clique no seu nome.

  • Na próxima janela, role a tela para baixo até encontrar o botão Escolher arquivo, estará abaixo a esquerda da tela, clique nele, será aberto uma nova janela, escolha o arquivo que será usado como imagem para a receita e clique em Abrir.

  • Após a imagem ser carregada, certifique-se de que a receita foi publicada , mantendo a caixa de seleção Publicada marcada (no canto inferior esquerdo).

  • Clique em salvar.

  • Nesse momento basta retornar a página inicial do site.

    Início da transcrição. GIF contendo a execução dos passos listados acima, o usuário executa os passos usando o navegador google chrome. Final da transcrição.

Peço que verifique o proposto acima, confirmando se as imagens foram adicionadas.

Fico à disposição em caso de dúvidas.

Abraços e bons estudos.

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software