Soy nuevo en React y cuando obtengo datos de una base de datos no consigo que la imagen se cargue correctamente.

 import React, { Component } from 'react'; import { stripSlashes } from 'slashes'; import ReactTimeAgo from 'react-time-ago'; import { Link } from 'react-router-dom'; class Conversation extends Component { render() { return ( <li className="post__item pt-3"> <svg className="me-2 rounded" width="32" height="32" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 32x32" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#007bff"></rect><text x="50%" y="50%" fill="#007bff" dy=".3em"></text></svg> <div className="pb-3 mb-0 small lh-sm border-bottom w-100"> <Link to={`/community/${this.props.items.post_id}`}> <div className="d-flex justify-content-between"> <strong className="text-gray-dark">{this.props.items.post_title}</strong> </div> </Link> <Link to={`/member/${this.props.items.post_author.user_id}`}> <span className="d-block">@{this.props.items.post_author.first_name}</span> </Link> <p className="mb-0 lh-sm text-muted"> <i className="fas fa-heart"></i> <ReactTimeAgo date={new Date(this.props.items.post_date)} locale="nl-NL"/> <div className="content" dangerouslySetInnerHTML={{ __html: stripSlashes(this.props.items.post_content) }}></div> </p> </div> </li> ); } } export default Conversation;

La salida es:

 <img src="https://domain.nl/wp-content/themes/weightz/inc/admin/img/emoticons/angry.svg">

Estoy usando peligrosamente SetInnerHTML pero solo obtengo el código pero no la imagen en sí. ¿Alguien sabe lo que estoy haciendo mal?