# L'image du post ne s'affiche pas après avoir été téléchargée sur Discourse

**URL:** https://meta.discourse.org/t/post-image-wont-be-displayed-after-being-downloaded-to-discourse/197230
**Category:** Support
**Created:** [Juillet 15, 2021, 11:27 UTC](https://meta.discourse.org/t/post-image-wont-be-displayed-after-being-downloaded-to-discourse/197230 "2021-07-15T11:27:47Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [Juillet 15, 2021, 11:27 UTC](https://meta.discourse.org/t/post-image-wont-be-displayed-after-being-downloaded-to-discourse/197230/1 "2021-07-15T11:27:47Z")

</div>

Bonjour !

J’ai des articles WP comme celui-ci : [Et vous, vous avez appris vite ? - Monocycle.info](https://monocycle.info/et-vous-vous-avez-appris-vite/)  
qui sont envoyés sur Discourse. **Au départ, l’image distante s’affiche correctement dans le post Discourse** , mais une fois l’image téléchargée sur Discourse, elle ne s’affiche plus : [Et vous, vous avez appris vite ? - Actualités - Monocycle.info](https://forum.monocycle.info/t/et-vous-vous-avez-appris-vite/24491)

En examinant le code du post Discourse après que l’image a été récupérée, il ressemble à ceci :

 ![image](https://global.discourse-cdn.com/meta/original/3X/a/b/aba7339cc0add4c97048eb05b5bcdbef98f133e5.png)

Si j’ajoute une ligne vide avant le code de l’image, elle s’affiche correctement :

 ![image](https://global.discourse-cdn.com/meta/original/3X/5/0/50a1f509262e55fb471a0443f5ac5a6562ea4baf.jpeg)

Voici le code de l’article WP :

```plaintext
<!-- wp:paragraph -->
<p>Dans le cadre d'une recherche sur l'apprentissage du monocycle, Claudia Stehr et Klaas Bil s'intéressent au temps de l'apprentissage. Et pour cela, ils ont besoin d'un grand nombre de statistiques.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Pour les aider, <a href="https://forms.gle/SEQtC6JQyw3tA7jv9">répondez à leur questionnaire</a> (version française) ! Si vous avez déjà répondu dans une autre langue, il ne faut pas doublonner. :)</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center"} -->
<div class="wp-block-image"><figure class="aligncenter"><img src="https://lh5.googleusercontent.com/N8Qtu1XBr7hK4Wg3hkxiMWPdU9V_czUuNS8VjHVxWfnLlQTCKrlUM2QoWrt9Zd4iXeMceaX7sZSi_8J_dJhOAgpISIdLdjguoSY0ZfrjCoHs6KEfBrXmrJcKU7tsyGaIqQ=w650" alt="" title=""/></figure></div>
<!-- /wp:image -->

```

Que se passe-t-il exactement ? Est-ce un bug WP-Discourse / Markdown ou autre chose ?

---

<div class="post-metadata">

### Author: ![angus](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/angus/32/341715_2.png) [@angus](https://meta.discourse.org/u/angus)
#### Post date: [Juillet 16, 2021, 3:15 UTC](https://meta.discourse.org/t/post-image-wont-be-displayed-after-being-downloaded-to-discourse/197230/2 "2021-07-16T03:15:35Z")

</div>

Cela concerne la façon dont Discourse gère la conversion HTML vers Markdown (cela n’a rien à voir avec [WP Discourse](https://github.com/discourse/wp-discourse)). J’ai essayé de reproduire votre problème, mais la balise `<img>` n’est pas convertie en image Markdown et s’affiche correctement (y compris après la « cuisson » du message).

[https://try.thepavilion.io/t/html-image-markdown-test/985](https://try.thepavilion.io/t/html-image-markdown-test/985)

---

<div class="post-metadata">

### Author: ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [Juillet 16, 2021, 10:52 UTC](https://meta.discourse.org/t/post-image-wont-be-displayed-after-being-downloaded-to-discourse/197230/3 "2021-07-16T10:52:19Z")

</div>

> [@angus](#):
>
> cependant, la balise `<img>` n’est pas convertie en image Markdown et s’affiche correctement (y compris après la « cuisson » du message).

Est-ce que je mal compris quelque chose ? L’image ne s’affiche pas dans votre lien :

 ![image](https://global.discourse-cdn.com/meta/original/3X/2/8/28e4faba63ef754bbb5aa91c7ff3ad1bf6d9b557.png)

---

<div class="post-metadata">

### Author: ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [Juillet 17, 2021, 1:01 UTC](https://meta.discourse.org/t/post-image-wont-be-displayed-after-being-downloaded-to-discourse/197230/4 "2021-07-17T13:01:09Z")

</div>

@Arkshine m’a envoyé cette solution qui ajoute un espace vide avant une image :

```php
add_filter('wp_discourse_excerpt', [$this, 'wp_discourse_excerpt'], 10, 1);

/**
 * Ajoute des espaces vides au-dessus de toute balise <img>.
 * L'objectif est d'éviter l'échec de Discourse lors de l'affichage d'images téléchargées en markdown.
 *
 * @param $post_content
 *
 * @return string
 */
public function wp_discourse_excerpt($post_content)
{
    $post_content = preg_replace('/(<img\s)/i', "\n\n$1", $post_content);
    $post_content = preg_replace('/[\n]{3,}/', "\n\n", $post_content);

    return $post_content;
}

```

---

<div class="post-metadata">

### Author: ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)
#### Post date: [Août 16, 2021, 1:01 UTC](https://meta.discourse.org/t/post-image-wont-be-displayed-after-being-downloaded-to-discourse/197230/5 "2021-08-16T13:01:12Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.