Affichage d'une image

**Yvesremort** · 12/09/2019, 14h55

Bonjour à tous,

je souhaite afficher une image sur une page, cependant malgré différentes tentatives rien n'y fait. Pouvez vous me dire ce qui ne fonctionne pas ?

Merci d'avance.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Connexion à l'administration</title>
        <link rel="stylesheet" href="{{ asset('bootstrap.min.css') }}" >
        <link rel="stylesheet"
              href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"
              integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
        <meta name="viewport" content="width=device-width", user-sclable="no">
 
       <style>
           body{
               display: flex;
               justify-content: center;
               height: 100vh;
           }
           .card{
               margin-top: 10%;
           }
       </style>
    </head>
 
    <body>
    <img style = "height: 200px; width: 100%; display: block;" src = "public/images/icone.PNG" alt =" Image  ">
    <div class="col-md-4">
            <div class="card bg-light">
                <div class="card-header">
                    <h4 class="card-title">
                        <i class="fas fa-lock">
                            Connexion à l'administration
                        </i>
                    </h4>
                </div>
                            <div class="card-body">
                    {% if hasError %}
                    <div class="alert alert-warning">
                        <p>Les informations que vous avez fournies sont incorrectes </p>
                    </div>
                    {% endif %}
                    <form method="post">
                        <div class="form-group"><label for="_username">Email</label><input type="text"
                         class="form-control" placeholder="Adresse email" name="_username" value="{{ username }}"></div>
 
                        <div class="form-group"><label for="_password">Mot de passe</label><input type="password"
                        class="form-control" placeholder="Mot de passe" name="_password"></div>
 
                        <div class="form-group">
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-lock-open"></i>
                                Connexion
                            </button>
 
                            <a href="{{ path ('home') }}" class="btn btn-link">
                                <i class="fas fa-arrow-circle-left"></i>
                                Retour vers le site
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </body>
</html>

Invité · 12/09/2019, 15h38

Bonjour,

1- MERCI de ne donner QUE le code nécessaire et suffisant.

2- Cette image ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

    <img style = "height: 200px; width: 100%; display: block;" src = "public/images/icone.PNG" alt =" Image  ">

Enlève les espaces en trop
Vérifie le chemin indiqué + la casse (.PNG ou .png ?)
ajoute le / à la fin (<img ..... />)

**Yvesremort** · 12/09/2019, 16h24

Merci pour ta réponse et désolé pour le surplus de code.

J'ai procédé aux changements mais elle n’apparaît pas.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<img style ="height:200px;width:100%;display:block;" src ="public/images/icone.PNG" alt ="Image"/>

Pour le chemin je ne pense pas me tromper, il le retrouve de lui-même en auto-complétion.

Voici où l'image se situe dans le projet.
Nom : Capture.PNG
Affichages : 857
Taille : 7,0 Ko

Nom : Capture.PNG
Affichages : 857
Taille : 7,0 Ko

Invité · 12/09/2019, 16h54

Si "Axo" est la "racine" :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

src="/public/images/icone.PNG"

Le 1er / indique la "racine".

Sinon, pour un chemin relatif, il faudrait connaitre où se trouve le fichier (dans lequel est affichée l'image) !

S'il est dans le dossier "articles", alors :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

src="../icone.PNG"

**Yvesremort** · 13/09/2019, 09h26

Le dossier Axo est bien marqué en Source Root et Ressource Root, j'ai également modifié le chemin suite à tes conseils :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<img style ="height:200px;width:100%;display:block;" src ="/public/images/icone.PNG" alt="Image"/>

Cependant rien n'y fait, l'image n’apparaît toujours pas, auriez vous une idée d'ou cela peut venir ?

Merci d'avance.

**Sparky95** · 16/09/2019, 13h42

bonjour,
regardes un peu le code source de ta page et tu click sur le lien directement dans ton code source voir si ton image s'affiches bien.
Dans le cas contraire comme disait jreaux62 c'est une erreur de chemin d'accès et tu saura mieux voir ou tu est occupé d'atterrir. Tu peux également le faire via l'inspecteur.
bonne journée.

Ajout: Je me demandes si ta racine ne serrait pas plutôt public essayes du coup /images/icone.png
une autre option pour vérifier qu'il s'agisses bien d'une erreur vers ton image est de mettre une image directement d'internet pour tester

Affichage d'une image

HTML

Vue hybride

Discussions similaires

Partager

Partager