整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
uniapp開發(fā)時，富文本里的圖片路徑因為是相對路徑而無法顯示，這時候就需要用正則方式給圖片路徑加上絕對地址（http://域名），讓uniapp能正常顯示。
另外，因為富文本里的圖片因為寬度太寬，導(dǎo)致顯示超出界面，同樣，可以用正則方式加以修正（但推薦采用在uniapp模板里加CSS樣式控制）
1、把uniapp里富文本的圖片相對路徑改為絕對路徑（加上https(s)://域名）的形式，代碼如下：
this.content1 = content1.replace(/\<img src="/gi, '<img src="http://localhost:2000');//content1為富文本里的內(nèi)容2、修改富文本里的圖片樣式，代碼如下：
A、推薦方式，即非正則方式：
<view class="detail">
<rich-text :nodes="content1"></rich-text>
</view>
<style>
.detail img{max-width:100%;}
</style>B、正則方式：
常用的圖像格式—GIF，PNG，JPG
圖像標(biāo)記<img />
HTML網(wǎng)頁中任何元素的實現(xiàn)都要依靠HTML標(biāo)記，要想在網(wǎng)頁中顯示圖像就需要使用圖像標(biāo)記，接下來將詳細(xì)介紹圖像標(biāo)記以及和他相關(guān)的屬性。其基本語法格式如下：
<img src="圖像URL" />
該語法中src屬性用于指定圖像文件的路徑和文件名，他是img標(biāo)記的必需屬性。
相對路徑
相對路徑不帶有盤符，通常是以HTML網(wǎng)頁文件為起點，通過層級關(guān)系描述目標(biāo)圖像的位置。
例如：
<img src="img/logo.gif" alt="傳智播客-專業(yè)的java培訓(xùn),.net培訓(xùn),php培訓(xùn),網(wǎng)頁培訓(xùn),平面培訓(xùn),iOS培訓(xùn)機(jī)構(gòu)" />
相對路徑設(shè)置分為以下三種：
圖像文件和html文件位于同一文件夾：只需輸入圖像文件的名稱即可，如<img src="logo.gif" />。
圖像文件位于html文件的下一級文件夾：輸入文件夾名和文件名，之間用“/”隔開，如<img src="img/img01/logo.gif" />。
圖像文件位于html文件的上一級文件夾：在文件名之前加入“…/” ，如果是上兩級，則需要使用 “…/ …/”，以此類推，如<img src="../logo.gif" />。
絕對路徑
絕對路徑一般是指帶有盤符的路徑。
例如：
“D:\HTML+CSS網(wǎng)頁制作\chapter02\img\logo.gif”，或完整的網(wǎng)絡(luò)地址，例如“http://www.itcast.cn/images/logo.gif”。
我自己是一名從事了多年開發(fā)的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年年初我花了一個月整理了一份最適合2019年學(xué)習(xí)的web前端學(xué)習(xí)干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關(guān)注我的頭條號并在后臺私信我：前端，即可免費獲取。
原文鏈接：https://blog.csdn.net/dubaiqaq/article/details/103500345
HTML文檔中使用的圖像的目的有：第一，使頁面具有視覺效果；第二個：顯示有用信息。此外，圖像也可以用作鏈接。
雖然使用圖像有很多好處，但是包含太多圖像的頁面通常看起來過于雜亂，并且可能需要花費太長的時間來加載。
要顯示圖像，需要使用src屬性來指定圖像的路徑，如下所示有幾個方法來實現(xiàn)：
img標(biāo)記的alt屬性定義當(dāng)圖像無法加載時顯示的文本來代替該圖像。對一個考慮周到的html來說這是一個必需屬性，簡要地描述圖像是什么。
圖像通常顯示為它實際的大小，但通過使用width和height屬性，可以更改它顯示的大小。以像素或百分比形式指定圖像的大小。技巧提示：使用圖像的實際大小（以像素為單位）來指定其顯示大小，以強(qiáng)制瀏覽器在圖像加載之前為其分配空間，以確保無論圖像是否顯示，頁面布局都保持不變。
img標(biāo)記的border屬性通過指定以像素為單位的厚度來添加邊框。您還可以設(shè)置border=“0”以刪除將圖像用作鏈接時添加的邊框。
默認(rèn)情況下，圖像顯示在html代碼中指定的位置（與任何其他標(biāo)記一樣）。但是，可以通過設(shè)置align=“l(fā)eft | right | top | bottom | middle”中的任意一個值來將圖像與周圍的文本或段落對齊。
調(diào)整圖像周圍的空白，以像素為單位。使用vspace調(diào)整上下垂直間距，或左右兩側(cè)使用hspace。
下面是以上標(biāo)記的示例：
瀏覽器顯示內(nèi)容如下所示：
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
