I'm new to React and when I fetch data from a database I don't get the image loaded properly.

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;

Output is:

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

I'm using dangerouslySetInnerHTML but only get the code but not the image itself. Does anyone know what I'm doing wrong?