เพิ่มรูปภาพลงใน HTML – C#

วิธีเพิ่มรูปภาพลงใน HTML

รูปภาพมีบทบาทสำคัญในการสื่อสารข้อมูลอย่างมีประสิทธิภาพ ดังนั้นการเพิ่มรูปภาพลงในเอกสาร HTML จึงเป็นสิ่งสำคัญและเป็นข้อกำหนดทั่วไปในการพัฒนาเว็บ Aspose.HTML สำหรับ .NET มอบโซลูชันที่มีประสิทธิภาพสำหรับนักพัฒนาในการจัดการรูปภาพภายในเอกสาร HTML คุณสามารถแทรกรูปภาพ ปรับแต่ง และลบหรือแยกออกจากเอกสาร HTML ได้ เรามาสำรวจวิธีการเพิ่มรูปภาพลงในเอกสาร HTML กันดีกว่า

ขั้นแรก ตรวจสอบให้แน่ใจว่าคุณได้ Aspose.HTML สำหรับ .NET ติดตั้ง ในโปรเจ็กต์ของคุณ กระบวนการติดตั้งไลบรารีนี้ค่อนข้างง่าย เปิดตัวจัดการแพ็คเกจ NuGet ค้นหา Aspose.HTML และติดตั้ง คุณยังอาจใช้คำสั่งต่อไปนี้จาก Package Manager Console:

Install-Package Aspose.HTML

องค์ประกอบภาพ HTML

คุณสามารถเพิ่มรูปภาพลงในเอกสาร HTML และหน้าเว็บได้โดยใช้องค์ประกอบ HTML <img> องค์ประกอบรูปภาพ HTML ต้องใช้แอตทริบิวต์ src และ alt แอตทริบิวต์ src มี URL ที่ชี้ไปยังรูปภาพที่คุณต้องการฝังในเอกสาร HTML หรือหน้าเว็บ URL ในแอตทริบิวต์ src อาจเป็นแบบสัมพัทธ์หรือแบบสัมบูรณ์ก็ได้ หากไม่มีแอตทริบิวต์ src องค์ประกอบ <img> จะไม่มีรูปภาพให้โหลด แอตทริบิวต์ alt ระบุข้อความแสดงแทนสำหรับรูปภาพ ด้านล่างนี้คือสามตัวเลือกสำหรับการระบุแอตทริบิวต์ src สำหรับองค์ประกอบ <img> โดยมี URL สัมพัทธ์สำหรับแหล่งที่มาของรูปภาพ, URL ที่สมบูรณ์ และด้วยข้อมูล URI (ภาพที่เข้ารหัส Base64):

<img src="images/photo.png" alt="A descriptive alt text" >

<img src="https://docs.aspose.com/html/images/georgia-castle.png" alt="Ananuri Fortress Complex in Georgia" >

<img src="data:image/jpeg;base64,/9j/4RLYRXhpZgAAS..." alt="The muzzle of a lioness close-up. The lioness looks away." >

เพิ่มรูปภาพลงในเอกสาร HTML โดยใช้ C#

การใช้ Aspose.HTML สำหรับไลบรารีคลาส .NET ช่วยให้คุณสร้างแอปพลิเคชันของคุณเองได้อย่างง่ายดาย เนื่องจาก API ของเรามีชุดเครื่องมือที่มีประสิทธิภาพในการแยกวิเคราะห์และแก้ไขเอกสาร HTML หากคุณต้องการเพิ่มรูปภาพลงใน HTML โดยทางโปรแกรม โปรดดูตัวอย่างโค้ด C# ด้านล่าง:

using Aspose.Html;
using System.IO;
...

    // Prepare a path to a source HTML file
    string documentPath = Path.Combine(DataDir, "document.html");

    // Prepare a path for resulting file saving 
    string savePath = Path.Combine(OutputDir, "add-image.html");

    // Create an instance of an HTML document
    using (var document = new HTMLDocument(documentPath))
    {
        var body = document.Body;

        // Create an image element
        var image = (HTMLImageElement)document.CreateElement("img");
        image.Src = "images/photo.png";
        image.Alt = "A descriptive alt text";

        // Attach the image to the document body
        body.AppendChild(image);

        // Save the HTML document to a file
        document.Save(savePath);
    }

ขั้นตอนในการเพิ่มรูปภาพลงใน HTML

ในตัวอย่างนี้ องค์ประกอบรูปภาพ HTML ใหม่จะถูกสร้างขึ้น มีการตั้งค่าแอตทริบิวต์ และรูปภาพจะถูกผนวกเข้ากับเอกสาร HTML ผลลัพธ์คือเอกสาร HTML ที่แก้ไขพร้อมรูปภาพที่เพิ่ม:

1. โหลดเอกสาร HTML โดยใช้ตัวสร้าง HTMLDocument()
2. สร้างองค์ประกอบรูปภาพใหม่โดยใช้เมธอด CreateElement()
3. ตั้งค่าแอตทริบิวต์สำหรับรูปภาพ เช่น แหล่งที่มา src และข้อความแสดงแทน alt
4. เพิ่มองค์ประกอบรูปภาพใหม่ต่อท้ายเอกสาร HTML ใช้เมธอด AppendChild() ของคลาส Node เพื่อเพิ่มรูปภาพที่ส่วนท้ายของรายการลูกของเนื้อหาเอกสาร
5. เรียกใช้เมธอด Save() เพื่อบันทึกเอกสาร HTML ที่แก้ไขด้วยภาพที่เพิ่ม

Aspose.HTML สำหรับ .NET เป็นไลบรารีการแยกวิเคราะห์ HTML ขั้นสูง เราสามารถสร้าง แก้ไข นำทางผ่านโหนด แยกข้อมูล รวมและแปลงไฟล์ HTML, XHTML, MD, EPUB และ MHTML เป็น PDF, DOCX, รูปภาพ และรูปแบบยอดนิยมอื่น ๆ นอกจากนี้ยังจัดการ CSS, HTML Canvas, SVG, XPath และ JavaScript ได้ทันทีเพื่อขยายงานการจัดการ สำหรับรายละเอียดเพิ่มเติมเกี่ยวกับการติดตั้งไลบรารี C# และข้อกำหนดของระบบ โปรดดูที่ เอกสาร Aspose.HTML

ตัวตรวจสอบแท็ก alt รูปภาพ – แอปออนไลน์

Aspose.HTML มี ตัวตรวจสอบแท็ก alt รูปภาพ เป็นเครื่องมือออนไลน์ฟรีที่ออกแบบมาเพื่อวิเคราะห์เว็บไซต์และระบุภาพที่ขาดแอตทริบิวต์ alt ที่ถูกต้อง แอปพลิเคชันจะสแกนหน้าเว็บ ค้นหารูปภาพที่ไม่มีข้อความแสดงแทน และสร้างรายงานที่ระบุว่ารูปภาพใดจำเป็นต้องมีแอตทริบิวต์ alt ที่สื่อความหมาย นักพัฒนาสามารถใช้เครื่องมือนี้เพื่อให้แน่ใจว่าเว็บไซต์ของตนเป็นไปตามมาตรฐานการเข้าถึงของ WCAG