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、正則方式：