2

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">

enter image description here

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

paultje182
  • 159
  • 1
  • 9
  • Looks like `post_content` is masked? What is the output of `console.log(this.props.items)`? Here's one way to replicate the problem: https://jsfiddle.net/b56L42kz/ –  Sep 15 '21 at 07:06
  • @ChrisG "\t\t\t\t\t\t<img src="https://weightz.nl/leden/wp-content/themes/weightz/inc/admin/img/emoticons/angry.svg">\t\t\t\t\t". In you're example is this post_content: itemsbad – paultje182 Sep 15 '21 at 07:23
  • 1
    Right; this means you need to [implement this huge mess](https://stackoverflow.com/questions/1912501/unescape-html-entities-in-javascript). A better solution is to prevent these posts from being stored escaped in the first place. –  Sep 15 '21 at 07:34

1 Answers1

0

I store the data in a different way in the database is the solution. Thanks @ChrisG for your look at this code

paultje182
  • 159
  • 1
  • 9