How to display html content with image inside json file? Reactjs

Question

The external image is working. I want to display HTML content with <img src='https://localhost:3000/static/media/image.jpg' alt='tutorial' /> image from my src folder.

The HTML text part is working.

JSON

[
{
    "title": "Sample Blog",
    "image": "https://source.unsplash.com/12mi25fTAmM/538x302",
    "content" : "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis sem ut diam lacinia placerat. Vestibulum pharetra velit sit amet bibendum faucibus. Phasellus sit amet scelerisque diam. Suspendisse potenti. Nulla quis odio quis arcu venenatis condimentum. Proin lectus est, suscipit a lorem non, blandit vestibulum lacus. Sed eu volutpat eros. <a href='/#'> Aenean</a> ullamcorper orci vulputate lectus maximus blandit. Fusce leo mauris, tempus non cursus id, scelerisque aliquet ante. Fusce venenatis, orci nec sollicitudin consectetur, sapien velit ultrices purus, eget suscipit quam mauris ut ipsum. Praesent pulvinar nunc id scelerisque vehicula. Nunc vitae leo eleifend, finibus metus non, varius libero.<br>  <img src='https://i.imgur.com/ltL1nJc.png' alt='tutorial' /> Fusce nisl leo, faucibus quis massa sed, ornare cursus augue. Donec at lorem tortor. Phasellus porttitor nisi sit amet dui pellentesque interdum. Vestibulum tempor velit sit amet viverra ornare. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce odio ex, mattis id libero non, posuere ullamcorper mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam venenatis molestie consectetur. Etiam luctus eu diam et imperdiet. Vestibulum imperdiet elementum nibh. Sed quis dui et orci facilisis fermentum. Nam laoreet molestie dui, ac iaculis nisl convallis non. Aenean ultricies hendrerit sem nec tempor. Donec fringilla fermentum lorem, at pharetra odio pretium vel. Donec eget nisl ullamcorper, finibus nibh ut, ornare arcu."
},
{
    "title": "Sample Blog 2",
    "content": "Fusce odio ex, mattis id libero non, <br>  <img src='http://localhost:3000/image.png' alt='tutorial' /> posuere ullamcorper mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam venenatis molestie consectetur. Etiam luctus eu diam et imperdiet. Vestibulum imperdiet elementum nibh. Sed quis dui et orci facilisis fermentum. Nam laoreet molestie dui, ac iaculis nisl convallis non. Aenean ultricies hendrerit sem nec tempor. Donec fringilla fermentum lorem, at pharetra odio pretium vel. Donec eget nisl ullamcorper, finibus nibh ut, ornare arcu.",
    "image": "https://source.unsplash.com/WLUHO9A_xik/538x302"
}
]

JS

{data.map(({title, content, image}, index) => (
      <div key={index}>
        <div className="card mb-3">
          {image ? <img src={image} className="img-about" alt={ title} /> : ''}
          <div className="card-body">
            <h6>{ title }</h6>

            <ShowMoreText
                lines={3}
                more='[view more]'
                less='[view less]'
                anchorClass='view-more'
                onClick={this.executeOnClick}
                expanded={false}
              >

                <p className="card-text" dangerouslySetInnerHTML={ {__html: content} } />
                <div className="fbcomments">
                  <FacebookProvider appId="639804143068124">
                    <Comments href={window.location.href + title} data-numposts="1" width="500" />
                  </FacebookProvider>
                </div>
            </ShowMoreText>
            <br></br>
            <FacebookProvider appId="639804143068124">
              <Like href={window.location.href + title} colorScheme="light" showFaces share />
            </FacebookProvider>



          </div>

        </div> 

      </div>
    ))}

How to display html content with image inside json file? Reactjs, JSON

how do you package / serve the web app? if you are using a plain apache/nginx with custom rules, then simply expose the /static-content dir, other wise check these answers 1 , 2 — AntJavaDev
– AntJavaDev, Commented May 11, 2020 at 9:11
Rather copy your code so that other people could try it or suggest fixes by just copying ^^ Thank you! — publicdomain
– publicdomain, Commented May 11, 2020 at 9:23
prntscr.com/sel9fa -> the image from json(content: localhost:3000/imagehere.png) is not working prntscr.com/selacr -> image location — kingbon
– kingbon, Commented May 11, 2020 at 9:27

publicdomain · Accepted Answer · 2020-05-11 09:22:16Z

0

Short: You need to use different string delimiters.

In your JSON code you use " to delimit the keys and values.

You are trying to have that image source as a string within JSON, thus you need to:

either escape the delimiters: \"https://localhost:3000\"
or use different delimiters like 'https://localhost:3000'

answered May 11, 2020 at 9:22

publicdomain

1,7724 gold badges24 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to display html content with image inside json file? Reactjs

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related