2012-11-01 32 views
40

Tôi muốn tạo một fiddle mà tôi phải thêm hình ảnh .. (dưới dạng hình nền vào div)Thêm hình ảnh trong JSfiddle

Tôi đã thử sử dụng thêm tài nguyên ở bên trái nhưng không hoạt động, Tôi cũng đã cố gắng cung cấp đường dẫn đầy đủ của hình ảnh trong cấu trúc thư mục của tôi nhưng điều này cũng không hoạt động ..

Có ai biết cách làm điều đó không?

+3

Bạn sẽ cần phải sử dụng một URL mà là web truy cập. Một thủ thuật dơ bẩn là tải nó lên Stack Overflow và sử dụng URL imgur kết quả –

+5

... tại sao điều này lại bị đóng? Đây là câu hỏi lập trình được chấp nhận hoàn toàn –

Trả lời

40

Bạn không thể liên kết hình ảnh LOCAL của bạn đến một trang web, đầu tiên tải lên hình ảnh của bạn với một số dịch vụ hình ảnh tải lên và vì sử dụng các đường dẫn trong jsfiddle bạn

Ví dụ

Tải lên hình ảnh của bạn với một số dịch vụ hình ảnh tải lên ví dụ postimage

Sau khi tải lên hình ảnh của bạn, sao chép dán url trong jsfiddle của bạn và nó sẽ làm việc ...

6

như thế này thêm đường dẫn url đầy đủ để background-image

div{ 
    height: 619px; 
    width: 780px; 
    background-image: url(https://www.webkit.org/blog-files/acid3-100.png); 
}​ 
20

Sử dụng một hình ảnh mã hóa base64:

background-image: url(data:image/png;base64,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) 

Nó sẽ làm chậm thời gian tải của fiddle của bạn nếu bạn lạm dụng nó nhưng không phải là một vấn đề lớn vì chỉ có nó một fiddle.

Có các trang web mà sẽ chuyển đổi hình ảnh địa phương của bạn để base64 miễn phí: Base64 Encode

+0

base64 Mã hóa hiện có giới hạn kích thước 1 MB. – Noumenon

Các vấn đề liên quan