Afficher une image ne PHP avec un lien

Résolu
Bonjour,

J'ai créer une base de donnée mysql [PhpMyAdmin] et aussi créer une barre de recherche (celle de 243tech).
Dans ma bdd j'ai mis des liens d'images (dans des tables, et les images sont hébergés par Casimages) et j'aimerais que lorsque l'on recherche un article il y ait une image affichée au lieu d'un lien.

Voici le code :

<?php
  while($terme_trouve = $select_terme->fetch())
  {
   echo "<div><h2>".$terme_trouve['titre']."</h2><p> ".$terme_trouve['contenu']."</p><br /><a href='index.php'>Menu</a>";
  }
  $select_terme->closeCursor();
   ?>


Et le 'contenu' c'est un lien contenant une image, mais j'aimerais que l'on voit l'image.

Si vous savez comment faire autrement je suis preneur mais tout ce que je voudrais dans la mesure du possible c'est d'afficher une image (en accord à la recherche : pas n'importe quelle image) lorsque l'on fait une recherche, ou insérer une image dans une bdd.

Merci d'avance,

Bonne journée.

Configuration: Windows / Chrome 80.0.3987.163

11 réponses

  1. Contributeur
    bonjour,
    tu dois donc étudier comment on affiche des images en html.
    1. +1 yb_be, PHP n'affiche rien c'est un langage de programmation et c'est le HTML qui affiche des contenus sur une page web avec quelque chose qui ressemble à ça:

      <html><body><? echo '<img src='.$image.' alt='.$description_image.' />';?></body></html>
      1. Bonjour Nanaki,
        Aussi merci,
        Mais j'ai compris le principe avec la balise image et php mais je ne suis pas sure de comprendre. Le lien contenant mon image est dans une bdd et dans une table nommée 'contenu'. Je dois remplacer $image par $contenu ?
        Car je cherche à afficher une image à partir d'un lien stocké dans une table mysql.
        Merci d'avance,
        Bonne journée.
        1. Contributeur
          tu dois t'assurer que $image contienne le lien vers l'image.
      2. mais le lien est dans la table mysql [phphmyadmin] nommée contenu.
        Comment je peux stocker les données de 'contenu' dans une variable ?
        Merci
        1. Le principe c'est que c'est une barre de recherche donc les images à afficher peuvent varier
          1. Contributeur
            c'est pour cela que la variable s'appelle variable, elle peut varier.
            peut-être ainsi:
            $image = $terme_trouve['contenu'];
        2. Merci de votre réponse,

          Il m'indique cela :
          Notice: Undefined index: in /storage/ssd5/582/13125582/public_html/verif-form.php on line 47

          voici le code :
          <?php
          while($terme_trouve = $select_terme->fetch())
          {
          $image = $terme_trouve['contenu'];
          echo "<div><h2>".$terme_trouve['titre']."</h2><p> ".$terme_trouve['<img src='.$image.' alt='.$description_image.' />']."</p><br /><a href='index.php'>Menu</a>";
          }
          $select_terme->closeCursor();
          ?>


          Et qu'est ce que '
          alt='.$description_image'
          '?
          1. Modérateur
            Bonjour,

            Déjà, merci de préciser le langage dans les balises de code afin d'avoir la coloration syntaxique et l'indentation.
            Explications ( à lire entièrement...) disponibles ici :
            https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code

            Ensuite, ton code n'est pas bon.
            Essaye ça
            <?php
            while($terme_trouve = $select_terme->fetch()) {
               $image = $terme_trouve['contenu'];
               $titre = $terme_trouve['titre'];
               $description_image  = $terme_trouve['description_image'];
               echo "<div>
            		  <h2>".$titre."</h2>
            		  <p> 
            	       <img src='".$image."' alt='".$description_image."' />
            	      </p><br />
            	      <a href='index.php'>Menu</a>
            		</div>";
            }
            $select_terme->closeCursor();
            ?>
            
        3. Il m'indique cela :

          Notice: Undefined index: description_image in /storage/ssd5/582/13125582/public_html/verif-form.php on line 45

          Je vais essayer d'enlever le 'alt'
          1. Modérateur
            En même temps.. je me suis simplement inspiré de ton code.
            Que contient ta table ? (quels sont les champs disponibles ? )

            Si il n'y a pas de "description d'image", dans le ALT tu peux simplement remettre la variable titre ou le chemin de l'image.. peu importe
          2. @jordane45La table contient un lien, mais c'est peut être du au lien le problème ?


            et l'image s'affiche comme ça :
          3. Modérateur
            @VWariorAs tu testé le lien ?
            Peux tu nous en donner un qu'on le teste ?
            et puis... Affiche le code source de ta page depuis ton navigateur ( CTRL + u ) et colle nous le code correspondant à ton image.
        4. Lien de l'image : https://www.casimages.com/i/200408122146851340.jpg.html

          Code source (page verif-form.php) :
          <?php
          try
          {
           $bdd = new PDO("mysql:host=localhost;dbname=id13125582_une", "id13125582_constant", "Re1C-Dx<<Q(>U81O");
           $bdd ->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
          }
          
          catch(Exception $e)
          {
            die("Une érreur a été trouvé : " . $e->getMessage());
          }
          $bdd->query("SET NAMES UTF8");
          
          if (isset($_GET["s"]) AND $_GET["s"] == "Rechercher")
          {
           $_GET["terme"] = htmlspecialchars($_GET["terme"]); //pour sécuriser le formulaire contre les intrusions html
           $terme = $_GET["terme"];
           $terme = trim($terme); //pour supprimer les espaces dans la requête de l'internaute
           $terme = strip_tags($terme); //pour supprimer les balises html dans la requête
          
           if (isset($terme))
           {
            $terme = strtolower($terme);
            $select_terme = $bdd->prepare("SELECT titre, contenu FROM articles WHERE titre LIKE ? OR contenu LIKE ?");
            $select_terme->execute(array("%".$terme."%", "%".$terme."%"));
           }
           else
           {
            $message = "Vous devez entrer votre requete dans la barre de recherche";
           }
          }
          ?>
          <!DOCTYPE html>
          <html>
           <head>
            <meta charset = "utf-8" >
            <title>Les résultats de recherche</title>
           </head>
           <body>
           
          <?php
          while($terme_trouve = $select_terme->fetch()) {
             $image = $terme_trouve['contenu'];
             $titre = $terme_trouve['titre'];
             
             echo "<div>
          		  <h2>".$titre."</h2>
          		  <p> 
          	       <img src='".$image."' />
          	      </p><br />
          	      <a href='index.php'>Menu</a>
          		</div>";
          }
          $select_terme->closeCursor();
          ?>
           </body>
          </html>


          Voila, merci de ton aide et demande moi si tu as besoin d'autre chose
          1. Modérateur
            Je ne t'ai pas demandé le code PHP ... mais le code source généré de ta page.
            Tu n'as pas fais de CTRL+u sur ta page comme je te l'ai demandé ....

            Tu remarqueras également que ton image... n'est pas une image... mais le lien vers une page web ( un fichier html)
            Ca ne peut donc pas marcher !
        5. <!DOCTYPE html>
          <html>
           <head>
            <meta charset = "utf-8" >
            <title>Les résultats de recherche</title>
           </head>
           <body>
           
          <div>
              <h2>Une Constant :</h2>
              <p> 
                  <img src='https://www.casimages.com/i/200408122146851340.jpg.html' />
                 </p><br />
                 <a href='index.php'>Menu</a>
            </div> <div style="text-align: right;position: fixed;z-index:9999999;bottom: 0;width: auto;right: 1%;cursor: pointer;line-height: 0;display:block !important;"><a title="Hosted on free web hosting 000webhost.com. Host your own website for FREE." target="_blank" href="https://www.000webhost.com/?utm_source=000webhostapp&utm_campaign=000_logo&utm_medium=website&utm_content=footer_img"><img src="https://cdn.000webhost.com/000webhost/logo/footer-powered-by-000webhost-white2.png" alt="www.000webhost.com"></a></div><script>function getCookie(t){for(var e=t+"=",n=decodeURIComponent(document.cookie).split(";"),o=0;o<n.length;o++){for(var a=n[o];" "==a.charAt(0);)a=a.substring(1);if(0==a.indexOf(e))return a.substring(e.length,a.length)}return""}getCookie("hostinger")&&(document.cookie="hostinger=;expires=Thu, 01 Jan 1970 00:00:01 GMT;",location.reload());var wordpressAdminBody=document.getElementsByClassName("wp-admin")[0],notification=document.getElementsByClassName("notice notice-success is-dismissible"),hostingerLogo=document.getElementsByClassName("hlogo"),mainContent=document.getElementsByClassName("notice_content")[0],wpSidebar=document.getElementById("adminmenuwrap"),wpTopBarRight=document.getElementById("wp-admin-bar-top-secondary");if(null!=wordpressAdminBody&¬ification.length>0&&null!=mainContent){var googleFont=document.createElement("link");googleFontHref=document.createAttribute("href"),googleFontRel=document.createAttribute("rel"),googleFontHref.value="https://fonts.googleapis.com/css?family=Roboto:300,400,600",googleFontRel.value="stylesheet",googleFont.setAttributeNode(googleFontHref),googleFont.setAttributeNode(googleFontRel);var css="@media only screen and (max-width: 576px) {#main_content {max-width: 320px !important;} #main_content h1 {font-size: 30px !important;} #main_content h2 {font-size: 40px !important; margin: 20px 0 !important;} #main_content p {font-size: 14px !important;} #main_content .content-wrapper {text-align: center !important;}} @media only screen and (max-width: 781px) {#main_content {margin: auto; justify-content: center; max-width: 445px;} .upgrade-btn-sidebar {display: none;} #wp-toolbar .top-bar-upgrade-btn {width: 52px; height: 46px !important; padding: 0 !important;} .top-bar-upgrade-btn__text {display: none;} .dashicons-star-filled.top-bar-upgrade-btn__icon::before {font-size: 28px; margin-top: 10px; width: 28px; height: 28px;}} @media only screen and (max-width: 1325px) {.web-hosting-90-off-image-wrapper {position: absolute; max-width: 95% !important;} .notice_content {justify-content: center;} .web-hosting-90-off-image {opacity: 0.3;}} @media only screen and (min-width: 769px) {.notice_content {justify-content: space-between;} #main_content {margin-left: 5%; max-width: 445px;} .web-hosting-90-off-image-wrapper {position: absolute; right: 0; display: flex; padding: 0 5%}} @media only screen and (max-width: 960px) {.upgrade-btn-sidebar {border-radius: 0 !important; padding: 10px 0 !important; margin: 0 !important;} .upgrade-btn-sidebar__icon {display: block !important; margin: auto;} .upgrade-btn-sidebar__text {display: none;}}  .web-hosting-90-off-image {max-width: 90%; margin-top: 20px;} .content-wrapper {z-index: 5} .notice_content {display: flex; align-items: center;} * {-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;} .upgrade_button_red_sale{box-shadow: 0 2px 12px -6px #cc292f; max-width: 350px; border: 0; border-radius: 3px; background-color: #6747c7 !important; padding: 15px 55px !important;  margin-bottom: 48px; font-size: 14px; font-weight: 800; color: #ffffff;} .upgrade_button_red_sale:hover{color: #ffffff !important; background: rgba(103,71,199, 0.9) !important;} .upgrade-btn-sidebar {text-align:center;background-color:#ff4546;max-width: 350px;border-radius: 3px;border: 0;padding: 12px; margin: 20px 10px;display: block; font-size: 12px;color: #ffffff;font-weight: 700;text-decoration: none;} .upgrade-btn-sidebar:hover, .upgrade-btn-sidebar:focus, .upgrade-btn-sidebar:active {background-color: rgba(255,69,70, 0.9); color: #ffffff;} .upgrade-btn-sidebar__icon {display: none;} .top-bar-upgrade-btn {height: 100% !important; display: inline-block !important; padding: 0 10px !important; color: #ffffff; cursor: pointer;} .top-bar-upgrade-btn:hover, .top-bar-upgrade-btn:active, .top-bar-upgrade-btn:focus {background-color: #ff4546 !important; color: #ffffff !important;} .top-bar-upgrade-btn__icon {margin-right: 6px;}",style=document.createElement("style"),sheet=window.document.styleSheets[0];style.styleSheet?style.styleSheet.cssText=css:style.appendChild(document.createTextNode(css)),document.getElementsByTagName("head")[0].appendChild(style),document.getElementsByTagName("head")[0].appendChild(googleFont);var button=document.getElementsByClassName("upgrade_button_red")[0],link=button.parentElement;link.setAttribute("href","https://www.hostinger.com/hosting-starter-offer?utm_source=000webhost&utm_medium=panel&utm_campaign=000-wp"),link.innerHTML='<button class="upgrade_button_red_sale">Upgrade Now</button>',(notification=notification[0]).setAttribute("style","background-color: #f8f8f8; border-left-color: #6747c7 !important;"),notification.className="notice notice-error is-dismissible";var mainContentHolder=document.getElementById("main_content");mainContentHolder.setAttribute("style","padding: 0;"),hostingerLogo[0].remove();var h1Tag=notification.getElementsByTagName("H1")[0];h1Tag.className="000-h1",h1Tag.innerHTML="Limited Time Offer",h1Tag.setAttribute("style","color: #32454c;  margin-top: 48px; font-size: 48px; font-weight: 700;");var h2Tag=document.createElement("H2");h2Tag.innerHTML="From $0.79/month",h2Tag.setAttribute("style","color: #32454c; margin: 20px 0 45px 0; font-size: 48px; font-weight: 700;"),h1Tag.parentNode.insertBefore(h2Tag,h1Tag.nextSibling);var paragraph=notification.getElementsByTagName("p")[0];paragraph.innerHTML="Don’t miss the opportunity to enjoy up to <strong>4x WordPress Speed, Free SSL and all premium features</strong> available for a fraction of the price!",paragraph.setAttribute("style",'font-family: "Roboto", sans-serif; font-size: 18px; font-weight: 300; color: #6f7c81; margin-bottom: 20px;');var list=notification.getElementsByTagName("UL")[0];list.remove();var org_html=mainContent.innerHTML,new_html='<div class="content-wrapper">'+mainContent.innerHTML+'</div><div class="web-hosting-90-off-image-wrapper"><img class="web-hosting-90-off-image" src="https://cdn.000webhost.com/000webhost/promotions/wp-inject-default-img.png"></div>';mainContent.innerHTML=new_html;var saleImage=mainContent.getElementsByClassName("web-hosting-90-off-image")[0];wpSidebar.insertAdjacentHTML("beforeend",'<a href="https://www.hostinger.com/hosting-starter-offer?utm_source=000webhost&utm_medium=panel&utm_campaign=000-wp-sidebar" target="_blank" class="upgrade-btn-sidebar"><span class="dashicons dashicons-star-filled upgrade-btn-sidebar__icon"></span><span class="upgrade-btn-sidebar__text">Upgrade</span></a>'),wpTopBarRight.insertAdjacentHTML("beforebegin",'<a class="top-bar-upgrade-btn" href="https://www.hostinger.com/hosting-starter-offer?utm_source=000webhost&utm_medium=panel&utm_campaign=000-wp-top-bar" target="_blank"><span class="ab-icon dashicons-before dashicons-star-filled top-bar-upgrade-btn__icon"></span><span class="top-bar-upgrade-btn__text">Go Premium</span></a>')}</script><script type="text/javascript" src="https://a.opmnstr.com/app/js/api.min.js" data-campaign="f6brbmuxflyqoriatchv" data-user="71036" async></script></body>
          </html>


          Le gros paté de code c'est lié à mon hébergeur.
          Sinon tu connais un hébergeur d'image ?

          Si tu as besoin d'autre chose voici le site :
          https://recueil-une-francais.000webhostapp.com

          Il rajoute automatiquement le .html
          1. Merci beaucoup j'ai réussi à résoudre, le problème, cela fonctionne !