整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
我們平時在瀏覽網站的過程中如果只有文字的話難免會有些太單調了，并且看文字多了眼睛也會比較難受，這時我們想要讓我們的網頁更漂亮更吸引人眼球，那么肯定少不了精美的圖片來進行點綴，這就用到了今天我要教給大家的圖像標簽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圖片標簽的簡單應用
天介紹一個根據html生成圖片的工具html2canvas，主要原理是使用canvas繪制html，再使用canvas生成圖片。
工具官網
1. 安裝
npm install html2canvas --save
2. 引用
import html2canvas from 'html2canvas'
3. 使用
如：生成id為result_page容器內dom的圖片；
html2canvas(document.querySelector("#result_page"), {scale:1,logging:false}).then(canvas => {
self.resultImgSrc = canvas.toDataURL("image/png");
})
注：scale：控制著放大比例，值越大越耗性能，生成的圖片越清晰，如果視口寬度為750px，設置為1即可；
<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 邊框
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
