Como adicionar imagem ao HTML no Flask?

Desenvolvimento Web
, ,
1

Gostaria de adicionar uma logo na navbar, porem, o arquivo não carrega.

<!doctype html>
<html lang="en" data-bs-theme="dark">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Barbearia</title>

        <nav class="navbar navbar-expand-lg bg-body-tertiary">
            <div class="container-fluid">
                <a class="navbar-brand" href="#">
                    <img src="/img/logo.webp" width="30" height="24" class="d-inline-block align-text-top">
                    Barbershop
                </a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarNavDropdown">
                    <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="#">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Features</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Pricing</a>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                        Dropdown link
                        </a>
                        <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="#">Action</a></li>
                        <li><a class="dropdown-item" href="#">Another action</a></li>
                        <li><a class="dropdown-item" href="#">Something else here</a></li>
                        </ul>
                    </li>
                    </ul>
                </div>
            </div>
        </nav>

        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    </head>
    <body>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
    </body>
</html>
2 curtidas
2

Para adicionar imagens ao HTML usando Flask, você precisa utilizar o static.

  1. Na raiz do seu projeto crie uma pasta chamada static.
  2. Crie uma pasta chamada img dentro da pasta static

Agora no seu HTML, você pode utilizar os seus arquivos estáticos da seguinte forma:

<img src="{{ url_for('static', filename='img/minha_imagem.webp') }}" />

Ou seja, o proprio Flask vai construir a URL apontando para o arquivo dentro da pasta static.
Caso tenha mais dúvidas como sobre os arquivos estáticos, veja na documentação:

https://flask.palletsprojects.com/en/2.3.x/tutorial/static/

Ou então, assista meu video sobre Desenvolvimento Web com Flask.

1 curtida
3

Assim como o @ProgramadorPython disse na resposta, o Flask usa a função url_for pra criar uma url dinâmica pros arquivos estáticos do projeto, pode parecer chato ou complicado ficar colocando essa papagaiada de coisa no html, mas traz duas vantagens essenciais pro seu projeto: Flexibilidade e Segurança.

Flexibilidade:

O url_for gera a url do arquivo estatico(imagem, css ou script) de forma a evitar problemas com caminhos relativos e absolutos (acontece muito porque Linux e Windows tem sistemas de pastas diferentes), ajudando evitar erros caso você mude a estrutura do projeto ou mova seus arquivos, pq a função ajusta automaticamente, evitando a quebra de link.

Se você mudar a estrutura do seu projeto, como renomear a pasta static para assets, você só precisaria atualizar essa referência uma vez na configuração do Flask, e todas as chamadas url_for serão ajustadas automaticamente.

Segurança:

O url_for garante que sua url seja sempre válida e segura, convertendo qualquer caractere inseguro para um caractere seguro, tipo espaço ou caracteres especiais, já que urls inseridas manualmente podem ser manipuladas pra incluir scripts maliciosos, vulgo XSS (Cross-Site Scripting).
Com a função url_for você evita essa vulnerabilidade porque impossibilita que as urls sejam manipuladas externamente.

2 curtidas