html開發筆記15-圖片標簽-向網頁添加圖片

、圖片標簽是用 <img> 單標簽來定義：

作用是向網頁中添加圖片，并且img標簽有多個可用參數可以添加。

二、代碼演示

號主要用于分享企業中常用的技術，更加側重于實用，歡迎關注，便于瀏覽其它更多實用的歷史文章。

1. pom.xml

<dependency>
 <groupId>org.springframework.boot</groupId>
 <artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
 <groupId>org.springframework.boot</groupId>
 <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

2. application.properties

spring.servlet.multipart.max-request-size=10MB
spring.servlet.multipart.max-file-size=10MB

3. html

upload.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>
<h1>Spring Boot file upload example</h1>
<form method="POST" action="/upload" enctype="multipart/form-data">
 <input type="file" name="file" /><br/><br/>
 <input type="submit" value="提交" />
</form>
</body>
</html>

resut.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<body>
<div th:if="${message}">
 <h2 th:text="${message}"/>
</div>
</body>
</html>

4. SampleController

@Controller
public class SampleController {
 @GetMapping("/")
 public String upload() {
 return "upload";
 }
 @RequestMapping("/result")
 public String result() {
 return "result";
 }
 @PostMapping("/upload")
 public String singleFileUpload(@RequestParam("file") MultipartFile file, RedirectAttributes redirectAttributes) {
 if (file.isEmpty()) {
 redirectAttributes.addFlashAttribute("message", "Please select a file to upload");
 return "redirect:result";
 }
 try {
 // Get the file and save it somewhere
 byte[] bytes = file.getBytes();
 Path path = Paths.get(uploadDirectory() + "/" + file.getOriginalFilename());
 Files.write(path, bytes);
 redirectAttributes.addFlashAttribute("message",
 file.getOriginalFilename() + " upload success");
 } catch (IOException e) {
 e.printStackTrace();
 }
 return "redirect:/result";
 }
 private String uploadDirectory() throws FileNotFoundException {
 //獲取跟目錄
 File path = new File(ResourceUtils.getURL("classpath:").getPath());
 if(!path.exists()) path = new File("");
 System.out.println("path:"+path.getAbsolutePath());
 //如果上傳目錄為/static/images/upload/，則可以如下獲取：
 File upload = new File(path.getAbsolutePath(),"static/upload/");
 if(!upload.exists()) upload.mkdirs();
 System.out.println("upload url:"+upload.getAbsolutePath());
 //在開發測試模式時，得到的地址為：{項目跟目錄}/target/static/images/upload/
 //在打包成jar正式發布時，得到的地址為：{發布jar包目錄}/static/images/upload/
 return upload.getAbsolutePath();
 }
}

5.訪問 localhost:8080/

選擇上傳文件進行上傳

本號主要用于分享企業中常用的技術，更加側重于實用，歡迎關注，便于瀏覽其它更多實用的歷史文章。

站文章怎么添加圖片？在進行網站優化時，站內文章的質量很重要，其中除了需要撰寫高質量的內容，注意關鍵詞的密度布局這些，添加圖片也具有一定的優化作用，有利于提升用戶的體驗。那么如何在文章中添加圖片呢？

通常，在網站文章中添加圖片有手動、半手動和自動這三種方法。

手動添加圖片就是手動點擊添加本地的圖片，這種方式的效率較低，而且需要自己找尋合適的圖片；半手動添加圖片就是先處理好圖片并命名，打包上傳到服務器，然后利用工具批量插入圖片在服務器中的地址，找到圖片存儲文件夾，記錄其路徑，這樣文章發布時就避免手動查找圖片，比純手動添加效率高；自動添加圖片就是利用插件來實現。有一些CMS程序中會有很多插件是可以使用的，如果沒有圖片添加的相關插件，可以找人開發一個。這個插件主要實現的功能是，按照指定的圖片作為底部圖層，而后在圖片上自動生成文字，并且是以文章標題為準，這樣這篇文章就有了專屬圖片。當然，進一步優化就是實現不同文章位置插入圖片。這樣做的好處是，如果底層圖片沒有版權，而且文字可以商用，也就避免了侵權的麻煩。

了解完如何在文章中添加圖片，對于添加的圖片還有一些問題是需要注意的。

所添加的圖片大小

在處理圖片時，需要先確定圖片的正確大小，等上傳后發現尺寸不對再去修改是很浪費時間的，而圖片太大會拖累網站的加載速度，這一點是需要注意的。另外，還需要考慮網站支持格式的問題，通常是jpg、png比較好。

給圖片添加Alt標簽

搜索引擎是無法識別圖片的，必須用html標簽中的alt標簽屬性來識別，因此給圖片添加Alt標簽是必不可少的操作，這有利于蜘蛛抓取。

所添加圖片的數量

圖文結合的文章能增加用戶的閱讀體驗，但是太多的圖片會有反效果，因此一篇文章中的一兩張圖片就足夠了。另外要注意，圖片太多也會拖累網站的加載速度，所以要控制圖片的數量，不僅是和文字要有一個平衡點，還有和網站結構也要有一個平衡點。

所添加圖片相關性

在文章中添加圖片當然不是隨意添加的，應該為該頁面配備符合主題的相關圖片，要注意網站圖片和網站內容的相關聯性。

關于網站文章怎么添加圖片及圖片添加要注意的問題，我們就討論到這里，以上內容僅供參考。對于網站圖片優化的細節大家一定要多多注意，最好希望這篇能對大家進行網站優化有幫助。

在線咨詢

上一篇：一組小型的自適應CSS模塊，可以在每個Web項目中使用-Pure
下一篇：為什么我推薦使用JSX開發Vue3

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商