美文网首页react umi dva antd大前端
react富文本点击图片预览

react富文本点击图片预览

作者: jack钱 | 来源:发表于2022-06-14 14:10 被阅读0次
    Vue
    <p @click="hanldeImage($event)" v-html="value" />
    
    通过click事件的参数,可以获取到点击标签的属性
    hanldeImage(event) {
        if (event.target.nodeName == 'IMG' || event.target.nodeName == 'img') {  // 标签名
          const img = event.target.currentSrc; // 图片路径
        }
      },
    
    React
     <div onClick={richTextClick} dangerouslySetInnerHTML={{ __html: value }}></div>
    
    通过click事件的参数,可以获取到点击标签的属性
    function richTextClick(event: any) {
        if (event.target.nodeName == 'IMG' || event.target.nodeName == 'img') { // 标签名
          const img = event.target.currentSrc; // 图片路径
          console.log(img);
        }
      }
    

    参考:https://segmentfault.com/a/1190000040937897

    相关文章

      网友评论

        本文标题:react富文本点击图片预览

        本文链接:https://www.haomeiwen.com/subject/todzmrtx.html