React Native之html里面的图片自适应问题
2019-01-02 本文已影响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标签添加样式后,图片就会自适应了。