如何在json文件中显示带有图像的html内容？反应

Question

外部映像正在工作。我想用

HTML文本部分正在工作。

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>
    ))}

如何在json文件中显示带有图像的html内容？Reactjs， JSON




Answer 1

简短：您需要使用不同的字符串分隔符。

在JSON代码中，您使用“来分隔键和值。

您正试图将该图像源作为JSON中的字符串，因此您需要：

• 转义分隔符：\”https://localhost:3000\“