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 : 850
Taille : 7,0 Ko

Nom : Capture.PNG
Affichages : 850
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

Invité · 16/09/2019, 13h53

Bonjour,

on ne sait toujours pas dans QUEL DOSSIER est le FICHIER...
Ça aiderait à définir le chemin relatif.

**Yvesremort** · 17/09/2019, 11h10

Bonjour et merci pour vos réponses ,
désolé pour le temps de réponse mais rapport de stage oblige ^^

je continu à tester vos solutions.

jreaux62 :
voici le chemin exact de l'image avec le dossier :

‪C:\Blog\Axo\public\images\icone.PNG

Sparky95 :
j'ai essayé ta proposition cependant je me trouve avec ce message : "Cannot resolve directory".

Sur PhpStorm je peux modifier le RessourceRoot et le SourceRoot, j'ai essayé également cette solution mais rien n'y fait.

Invité · 17/09/2019, 12h39

Bonjour,

J'ai demandé le chemin du FICHIER !

**Yvesremort** · 17/09/2019, 14h15

Envoyé par jreaux62

Bonjour,

J'ai demandé le chemin du FICHIER !

Tu peux l'écrire en plus grand et en plus gras si tu veux si je ne vois pas de quoi tu parles tu n'auras pas la bonne réponse pour autant, de plus je ne t'oblige pas à répondre à mes questions de débutant non plus donc soit on essaye de se comprendre soit il vaut mieux stopper la

Je vais tenter une autre réponse vu que les précédents n'étaient pas bonnes, voici le chemin pour l'affichage de l'image :
je l'appelle dans ma vue : Blog\Axo\templates\admin\dashboard\index.html.twig