mg标签的应用场景

我们平时在浏览网站的过程中如果只有文字的话难免会有些太单调了，并且看文字多了眼睛也会比较难受，这时我们想要让我们的网页更漂亮更吸引人眼球，那么肯定少不了精美的图片来进行点缀，这就用到了今天我要教给大家的图像标签img。

img标签的组成

src：图片的路径 这个是必须要有的

title：当我们把鼠标移动到图片上展示的文本内容

alt：当图片的路径错误或图片有问题时浏览器无法识别渲染的情况下展示的文本内容

width：设置图片的宽度

height：设置图片的高度

img标签的使用

以上就是img图片标签的简单应用

<script src="https://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>

图片标签 img

属性

alt 图片找不到时显示的内容

src 图片的位置

width宽度

height高度

border 边框

uniapp开发时，富文本里的图片路径因为是相对路径而无法显示，这时候就需要用正则方式给图片路径加上绝对地址（http://域名），让uniapp能正常显示。

另外，因为富文本里的图片因为宽度太宽，导致显示超出界面，同样，可以用正则方式加以修正（但推荐采用在uniapp模板里加CSS样式控制）

1、把uniapp里富文本的图片相对路径改为绝对路径（加上https(s)://域名）的形式，代码如下：

this.content1 = content1.replace(/\<img src="/gi, '<img src="http://localhost:2000');//content1为富文本里的内容

2、修改富文本里的图片样式，代码如下：

A、推荐方式，即非正则方式：

<view class="detail">
    <rich-text :nodes="content1"></rich-text>
</view>
<style>
    .detail img{max-width:100%;}
</style>

B、正则方式：