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](https://stackoverflow.com/questions/42899463/serving-static-images-with-webpack) , [2](https://stackoverflow.com/questions/53014651/is-it-possible-to-serve-static-files-with-create-react-app-from-public-folder) — AntJavaDev, May 11 '20 at 09:11
Rather copy your code so that other people could try it or suggest fixes by just copying ^^ Thank you! — finnmglas, May 11 '20 at 09:23
http://prntscr.com/sel9fa -> the image from json(content: http://localhost:3000/imagehere.png) is not working http://prntscr.com/selacr -> image location — kingbon, May 11 '20 at 09:27

score 0 · Answer 1 · answered May 11 '20 at 09:22

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'

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

1 Answers1