Html-react-parser: Erreur : img est une balise d'élément vide et ne doit pas avoir de « enfants » ni utiliser « dangerouslySetInnerHTML »

Créé le 26 août 2016 · 14Commentaires · Source: remarkablemark/html-react-parser

Salut!

Super plugin, je pense vraiment que cela va être utile pour ce sur quoi je travaille.

J'ai remarqué que l'analyse de tout élément img provoque l'erreur ci-dessus. Cela peut également s'appliquer à tout élément qui ne devrait jamais avoir d'éléments enfants.

Une solution de contournement temporaire consiste à utiliser quelque chose comme ceci :

const parserConfig = {
    replace: domNode => {
        if(domNode.type === DOM_TYPE_TAG && domNode.name === 'img') {
            return <img src={domNode.attribs.src} alt={domNode.attribs.alt} className={domNode.attribs.class} />;
        }
    }
};

bug

Source

poacher2k

Commentaire le plus utile

Je rencontrais ce problème parce que j'essayais d'ajouter des enfants à une balise img ...

Sshetty2 le 28 mai 2019

👍2 😕1

Tous les 14 commentaires

Merci de me le faire savoir. Avez-vous un exemple pour que je puisse reproduire cette erreur?

remarkablemark le 26 août 2016

Salut!
Vous pouvez le reproduire avec les éléments suivants :
ReactDOM.render(Parser('<div><img src="" alt=""/></div>'), document.getElementById('root'));

poacher2k le 29 août 2016

Super merci!

poacher2k le 29 août 2016

@poacher2k Merci pour l'exemple. J'ai examiné le bogue et fait un correctif dans #16.

Essayez npm update html-react-parser ou npm install [email protected] et dites-moi si cela supprime l'erreur pour vous.

remarkablemark le 29 août 2016

😄1 👍1

C'est réglé, merci encore ! Heureux de voir que vous avez également ajouté des contrôles pour d'autres éléments vides !

poacher2k le 29 août 2016

Super à entendre et vous êtes les bienvenus! ??

remarkablemark le 29 août 2016

@remarkablemark Je suis toujours confronté au problème et le code npm install [email protected] n'est pas mis à jour dans cette version.

vidit1 le 5 janv. 2018

@vidit1 Pouvez-vous confirmer que vous avez installé la version latest ?

npm i html-react-parser<strong i="8">@latest</strong>

# or
npm i [email protected]

Vérifiez ensuite en faisant :

npm ls html-react-parser

remarkablemark le 5 janv. 2018

@remarkablemark J'ai mis à jour la dernière version de html-react-parser et je suis toujours confronté à ce problème. Mon l'élément est à l'intérieur d'un composant material-ui.
<Drawer> <div className="alert" role="alert"> <img src="https://getbootstrap.com/assets/brand/bootstrap-solid.svg" width="30" height="30" className="d-inline-block align-top" alt=""> Bootstrap </img> </div> </Drawer>

blueskysmart le 12 janv. 2018

@blueskysmart : Vous avez le texte "Bootstrap" à l'intérieur de votre img -tag. Comme l'indique l'erreur, img est un élément vide et ne peut avoir aucun enfant.

Voir le commentaire de @remarkablemark ci-dessous pour savoir comment le corriger.

poacher2k le 12 janv. 2018

👍1

@blueskysmart Le commentaire fait par @poacher2k est correct. Vous pouvez voir la reproduction de cette erreur dans ce violon .

remarkablemark le 12 janv. 2018

Ok, je vois. Merci.

blueskysmart le 22 janv. 2018

Cette erreur survient également si vous essayez uniquement d'analyser ceci :
<img src="img.jpg".>

Pour le faire fonctionner, enveloppez-le dans un div :