Hướng dẫn how do i put an image into javascript? - làm cách nào để đưa một hình ảnh vào javascript?

Question

Ví dụ về cách thêm hình ảnh trong trang HTML bằng JavaScript:

Nội dung chính Show

Thêm hình ảnh bằng JavaScript
Thay đổi kiểu của phần tử div
Cập nhật phong cách của hình ảnh
Người giới thiệu
Làm thế nào để bạn nhập một hình ảnh vào JavaScript?
Làm thế nào để bạn tuyên bố một hình ảnh trong JavaScript?
JavaScript có thể hiển thị hình ảnh không?
Làm cách nào để đặt một hình ảnh vào mã của tôi?

Bản tóm tắt

Thêm hình ảnh bằng JavaScript
Thay đổi kiểu của phần tử div
Cập nhật phong cách của hình ảnh
Người giới thiệu

Thêm hình ảnh bằng JavaScript

Thay đổi kiểu của phần tử div

var img = document.createElement("img");

Cập nhật phong cách của hình ảnh

img.src = "matplotlib-grid-02.png";

Người giới thiệu

var block = document.getElementById("x");
block.appendChild(img);

Hãy tạo một hình ảnh biến với createdEuity ("IMG"):

<!DOCTYPE html>
<html lang="en">
<head>

    <title>Test Javascript</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

</head>

<body>

    <div id="x"></div>

    <script>

    var img = document.createElement("img");
    img.src = "matplotlib-grid-02.png";

    var div = document.getElementById("x");
    div.appendChild(img);
    //block.setAttribute("style", "text-align:center");

    </script>

</body>
</html>

sau đó chỉ ra tên của hình ảnh (Lưu ý: Nếu hình ảnh không nằm trong cùng thư mục với tài liệu HTML, chúng ta cũng có thể chỉ định đường dẫn đầy đủ đến hình ảnh '. :

</head> <body> <div id="x"></div> <script> var img = document.createElement("img"); img.src = "matplotlib-grid-02.png"; var div = document.getElementById("x"); div.appendChild(img); div.setAttribute("style", "text-align:center"); </script> </body> </html>

sau đó chỉ ra tên của hình ảnh (Lưu ý: Nếu hình ảnh không nằm trong cùng thư mục với tài liệu HTML, chúng ta cũng có thể chỉ định đường dẫn đầy đủ đến hình ảnh '. :

</head> <body> <div id="x"></div> <script> var img = document.createElement("img"); img.src = "matplotlib-grid-02.png"; img.setAttribute("style", "margin-top: 80px;"); var div = document.getElementById("x"); div.appendChild(img); div.setAttribute("style", "text-align:center"); </script> </body> </html>

sau đó chỉ ra tên của hình ảnh (Lưu ý: Nếu hình ảnh không nằm trong cùng thư mục với tài liệu HTML, chúng ta cũng có thể chỉ định đường dẫn đầy đủ đến hình ảnh '. :

Syscall

18.3k10 Huy hiệu vàng33 Huy hiệu bạc49 Huy hiệu đồng10 gold badges33 silver badges49 bronze badges

hỏi ngày 29 tháng 4 năm 2010 lúc 8:44Apr 29, 2010 at 8:44

Bạn cần sử dụng

img.src = "matplotlib-grid-02.png";

9 trong dòng 3.

Nếu bạn thử điều này ngay bây giờ trong bảng điều khiển:

var img = document.createElement("img");
img.src = "http://www.google.com/intl/en_com/images/logo_plain.png";
var src = document.getElementById("header");
src.appendChild(img);

img.src = "matplotlib-grid-02.png";

0

... bạn sẽ nhận được điều này:

Đã trả lời ngày 29 tháng 4 năm 2010 lúc 8:47Apr 29, 2010 at 8:47

Daniel Vassallodaniel VassalloDaniel Vassallo

330K71 Huy hiệu vàng497 Huy hiệu bạc439 Huy hiệu đồng71 gold badges497 silver badges439 bronze badges

6

Với một nghiên cứu nhỏ, tôi thấy rằng JavaScript không biết rằng một đối tượng tài liệu tồn tại trừ khi đối tượng đã được tải trước mã tập lệnh (như JavaScript đọc một trang).

img.src = "matplotlib-grid-02.png";

1

Syscall

18.3k10 Huy hiệu vàng33 Huy hiệu bạc49 Huy hiệu đồng10 gold badges33 silver badges49 bronze badges

hỏi ngày 29 tháng 4 năm 2010 lúc 8:44Mar 26, 2014 at 9:05

Bạn cần sử dụng

img.src = "matplotlib-grid-02.png";

9 trong dòng 3.

img.src = "matplotlib-grid-02.png";

2

Nếu bạn thử điều này ngay bây giờ trong bảng điều khiển:

img.src = "matplotlib-grid-02.png";

3

... bạn sẽ nhận được điều này:Apr 29, 2010 at 8:55

Đã trả lời ngày 29 tháng 4 năm 2010 lúc 8:47Guffa

Daniel Vassallodaniel Vassallo108 gold badges719 silver badges991 bronze badges

330K71 Huy hiệu vàng497 Huy hiệu bạc439 Huy hiệu đồng

img.src = "matplotlib-grid-02.png";

4

Với một nghiên cứu nhỏ, tôi thấy rằng JavaScript không biết rằng một đối tượng tài liệu tồn tại trừ khi đối tượng đã được tải trước mã tập lệnh (như JavaScript đọc một trang).May 28, 2014 at 23:48

Đã trả lời ngày 26 tháng 3 năm 2014 lúc 9:05this statements too

img.src = "matplotlib-grid-02.png";

5

Những công việc này:Apr 29, 2010 at 8:53

Hoặc sử dụng jQuery:Peter Bridger

Đã trả lời ngày 29 tháng 4 năm 2010 lúc 8:5514 gold badges56 silver badges88 bronze badges

0

Guffaguffa

673K108 Huy hiệu vàng719 Huy hiệu bạc991 Huy hiệu Đồng

img.src = "matplotlib-grid-02.png";

6

https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image

hoặc bạn chỉ có thể

Đã trả lời ngày 28 tháng 5 năm 2014 lúc 23:48yesterday

Loại bỏ các tuyên bố này quáSorter

Đã trả lời ngày 29 tháng 4 năm 2010 lúc 8:535 gold badges60 silver badges71 bronze badges

Làm thế nào để bạn nhập một hình ảnh vào JavaScript?

JavaScript ở bất cứ đâu..

Mở màn hình của hình ảnh. Nhấn vào nút hình ảnh trên thanh công cụ (ở phía dưới bên trái của màn hình dự án) ..

Nhập hình ảnh. Nhấn vào nút Plus trên thanh điều hướng (ở trên cùng bên phải của màn hình hình ảnh). ....

Sao chép thẻ hình ảnh. ....

Dán thẻ hình ảnh vào html ..

Làm thế nào để bạn tuyên bố một hình ảnh trong JavaScript?

Tạo một phần tử IMG trống bằng phương thức tài liệu.createelement ().Sau đó đặt các thuộc tính của nó như (SRC, chiều cao, chiều rộng, alt, tiêu đề, v.v.).Cuối cùng, chèn nó vào tài liệu. createElement() method. Then set its attributes like (src, height, width, alt, title etc). Finally, insert it into the document.

JavaScript có thể hiển thị hình ảnh không?

JavaScript được gọi là ngôn ngữ phát triển web.Bằng cách sử dụng JavaScript, chúng tôi có thể làm cho trang web của chúng tôi hấp dẫn bằng cách chèn hình ảnh vào đó.Theo mặc định, chúng tôi sử dụng thẻ trong HTML để hiển thị hình ảnh.Trong thẻ, chúng tôi có một phương thức được gọi là SRC, giúp lấy nguồn của hình ảnh mà chúng tôi đưa ra để hiển thị.By default, we use the tag in HTML to display images. In the tag, we have a method known as src , which helps get the source of the image that we gave to display.