Cách chèn hình ảnh vào html từ google

Google drive giúp bạn dễ dàng lưu trữ hình ảnh trực tuyến và chia sẻ hình ảnh ở mọi nơi. Nếu bạn có ý định thêm một hình ảnh từ tài khoản google drive vào mã HTML của mình, điều đó khá dễ dàng. Trong bài viết này, tôi sẽ chỉ cho bạn một cách rất nhanh để thực hiện với 3 bước đơn giản và dễ dàng

Tải hình ảnh lên ổ google của bạn

Đầu tiên, hãy truy cập tài khoản ổ đĩa của bạn [rõ ràng, lol]. Sau đó, bạn nhấp vào nút Mới rồi thêm tệp hình ảnh [hoặc thư mục] mà bạn muốn lưu trên Google drive của mình và tadaa. hình ảnh hiện đã có trên ổ đĩa của bạn

Nhận liên kết có thể chia sẻ

Nhấp chuột phải vào hình ảnh trong ổ đĩa google của bạn và sau đó chọn chia sẻ. Sau đó sẽ dẫn đến một màn hình hiển thị phương thức, sau đó bạn chọn Nhận liên kết có thể chia sẻ. Sao chép liên kết này vào khay nhớ tạm

Google Drive cho phép bạn lưu trữ nhiều loại nội dung khác nhau như hình ảnh, video, PDF, tài liệu, ứng dụng và nhiều nội dung khác trên nền tảng lưu trữ Google của riêng họ. Đối với hình ảnh, Google Drive sẽ tạo phiên bản tên tệp riêng cho mỗi hình ảnh bạn tải lên

Khi bạn xem kỹ tên ảnh bằng cách nhấp chuột phải vào nó và lấy URL, bạn sẽ thấy tên tệp bị thay đổi thành một dạng khác và sẽ khác với những gì bạn đã cung cấp trước đó, đồng thời ảnh sẽ không có bất kỳ phần mở rộng nào như jpg, png, . Đây là cách của google để bảo mật hình ảnh trong Google Drive

Khi bạn muốn chia sẻ một tệp từ Google Drive trong một số trang hoặc blog và muốn sử dụng nó trong thẻ img src của HTML bằng cách sao chép trực tiếp liên kết từ Google Drive, nó sẽ không hoạt động vì Google đã bảo vệ tệp của bạn khỏi truy cập trái phép . Ngay cả khi bạn đã chia sẻ hình ảnh, không ai có thể sử dụng chúng bên ngoài nền tảng Google. Ví dụ: họ chỉ có thể mở hình ảnh đó trong Google Drive, Google Photos, v.v.

Tuy nhiên, có một cách để sử dụng hình ảnh được lưu trữ trong Google Drive với một vài thủ thuật và sau đây là các bước để sử dụng Hình ảnh trên Google Drive trong HTML, blog và trang web

1 Đăng nhập vào Google Drive của bạn và tìm hình ảnh bạn muốn sử dụng trên Trang web

quả sung. Hình ảnh mà tôi muốn chia sẻ trong trang web và thẻ HTML img

2 Nhấp chuột phải vào hình ảnh bạn muốn trong blog hoặc thẻ HTML IMG và nhấp vào Nhận liên kết

quả sung. Nhấp chuột phải vào hình ảnh và nhấp vào "Nhận liên kết"

3 Trong cửa sổ bật lên, nhấp vào liên kết Sao chép

quả sung. Nhấp vào Sao chép liên kết hoặc Chỉ sao chép liên kết hiện tại khi nhấp chuột phải vào "Sao chép liên kết"

Sau đó, bạn sẽ nhận được liên kết trong ClipBoard. Nó trông như thế này

//drive.google.com/file/d/1I1vdwg3U3OJ2Zs0PshPc9wVIC19IMNNa/view?usp=sharing

Đây là liên kết có thể chia sẻ. khi bạn vào trình duyệt web và mở liên kết này trong trình duyệt web thì nó sẽ mở ra như hình bên dưới

4 Bây giờ, khi bạn cố gắng sử dụng điều này trong thẻ hình ảnh trong HTML như bên dưới

quả sung. Liên kết có thể chia sẻ trên Google Drive trong Thẻ hình ảnh Html

Khi bạn mở trang HTML này trong trình duyệt web, bạn sẽ không nhận được hình ảnh của mình và trang sẽ trông như thế này

quả sung. hiển thị liên kết có thể chia sẻ trên google drive không hoạt động trong tab img của trang web

Điều này cho thấy rằng việc sao chép trực tiếp các liên kết có thể chia sẻ không hoạt động

Để biết cách sử dụng trong thẻ IMG của HTML, bạn phải lấy URL ID của hình ảnh và trong ví dụ trên, URL ID là

17EqBYdKTEXp43I4ITzRcWHPwr560a0Sn

Chúng tôi phải sử dụng ID URL này trong cú pháp liên kết trực tiếp bên dưới

http. //lái xe. Google. com/uc?export=view&id=URLIDĐây

Bây giờ Liên kết trực tiếp của bạn trở thành như thế này

//drive.google.com/uc?export=view&id=17EqBYdKTEXp43I4ITzRcWHPwr560a0Sn

Bây giờ, hãy chèn liên kết trực tiếp ở trên vào thẻ hình ảnh trong HTML như hình bên dưới

Hình ảnh

quả sung. Liên kết trực tiếp từ liên kết có thể chia sẻ Google Drive

Bằng cách này, chúng tôi đã tạo một thẻ hình ảnh và thẻ này được hiển thị thành công trong trình duyệt web như hình bên dưới

quả sung. Hình ảnh được tải thành công từ liên kết trực tiếp google drive được tạo

Phải làm gì nếu tôi có một liên kết google drive với usp=sharing?

Nếu bạn có một liên kết với usp=sharing như bên dưới

//drive.google.com/file/d/17EqBYdKTEXp43I4ITzRcWHPwr560a0Sn/view?usp=sharing

Sau đó, bạn có thể sử dụng nó trên trang web mà không cần usp=sharing như hình bên dưới

//drive.google.com/file/d/17EqBYdKTEXp43I4ITzRcWHPwr560a0Sn/

Nhưng nhưng

Hãy xem xét một số hạn chế của Google Drive

Một số hình ảnh trong Google Drive ở chế độ riêng tư không thể hoạt động trên trang web. Hơn nữa, bạn không thể lấy liên kết đến các bộ sưu tập ảnh và sử dụng chúng trên trang web của mình và chỉ có thể sử dụng một hình ảnh duy nhất trên thẻ img src của trang web của bạn

Sự kết luận

Bạn có thể tạo liên kết trực tiếp từ liên kết hình ảnh có thể chia sẻ và sử dụng liên kết đó trong HTML thẻ hình ảnh của mình hoặc bạn chỉ cần sao chép liên kết trực tiếp đã tạo và dán vào bất kỳ trang web nào mà bạn muốn chia sẻ nội dung hình ảnh