整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
我們平時在瀏覽網站的過程中如果只有文字的話難免會有些太單調了，并且看文字多了眼睛也會比較難受，這時我們想要讓我們的網頁更漂亮更吸引人眼球，那么肯定少不了精美的圖片來進行點綴，這就用到了今天我要教給大家的圖像標簽img。
src：圖片的路徑 這個是必須要有的
title：當我們把鼠標移動到圖片上展示的文本內容
alt：當圖片的路徑錯誤或圖片有問題時瀏覽器無法識別渲染的情況下展示的文本內容
width：設置圖片的寬度
height：設置圖片的高度
源代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>圖像標簽</title> </head> <body> <pre> ../:代表上一級目錄 ../../：上上級目錄 當前目錄中的文件夾下使用：文件夾名稱/圖片名稱 上n級目錄下的n級文件夾：n個../+n個文件夾的名稱直到找到圖片文件為止 </pre> <img src="奶茶妹妹.png" width="500" height="300" title="這是同一個目錄下的圖片"><br> <img src="" alt="對不起，圖片走丟了"> <img src="img/章澤天.png" title="這是同一目錄中文件夾下的圖片"><img src="../田馥甄.png" width="350" height="300" title="這是上一級目錄中的圖片"> <img src="../img/高圓圓.png" title="這是上級目錄中某個文件夾下的圖片"> </body> </html> |
瀏覽器預覽效果圖
以上就是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、正則方式：
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
