美文网首页熏悟空外包工作室-案例直播
React Native之html里面的图片自适应问题

React Native之html里面的图片自适应问题

作者: 何必太轻浮 | 来源:发表于2019-01-02 15:57 被阅读76次

    后台使用编辑器编辑文章,插入图片,然后返回标签代码给我们,但是图片没有适配大小

    类似下面的代码

    const HTMLTEXT = `<h1>This HTML snippet is now rendered with native components !</h1>
        <img src="https://i.imgur.com/dHLmxfO.jpg?2"  />`
    
    WX20190102-155303@2x.png

    如果我们直接使用网页加载的话,图片太宽就会被切掉一部分,要怎样修改呢?

    很简单,使用全局替换,修改img标签样式即可

    • 全局替换字符串 /<img 代表对字符串<img的转义
      /g 表示替换所有字符串
      result是替换后生成的新字符串
    let content = HTMLTEXT
    //自适应图片大小
    var result = content.replace(/<img/g,'<img width="100%"');
    
    WX20190102-155532@2x.png

    给img标签添加样式后,图片就会自适应了。

    相关文章

      网友评论

        本文标题:React Native之html里面的图片自适应问题

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