在React中使文本中的图像可单击

I'm building a website where I get a blog post from an API call. The body of the post is just html code mixed with text, images and even objects like youtube videos (it is build with ckeditor in the back). Everything is working as expected but I would like to make images clickable. Clicking the image, would open a modal in lightbox style.

我当时正在考虑从人体中提取所有图像(如果有的话),并在帖子底部制作一个图库。但是我认为,只要使图像可点击并打开对话框,而无需在帖子中两次显示它们,那会更加优雅。

响应示例:

body: "<p>this is a text with some images: <img src='path/to/image1' /> and <img src='path/to/image2' /> how to make them clickable in React?</p>"

该主体是通过以下方式呈现的:

<GridItem xs={12} sm={8} md={8}>
    <div dangerouslySetInnerHTML={{ __html: text }} />
</GridItem>
评论
  • 放弃幸福
    放弃幸福 回复

    您可以在图片中使用onClick事件:

    <img src='path/to/image2' onClick={() => {aFunction}} />

    ps:如果愿意,也可以添加className来放置cursor:pointer。