Hướng dẫn how to store image in variable in javascript - cách lưu trữ hình ảnh trong biến trong javascript

Vì vậy, tôi gặp khó khăn khi tìm ra nếu có cách lưu trữ hình ảnh cục bộ được lưu trên máy tính của tôi và đặt chúng thành các biến để theo cách đó một hình ảnh nhất định sẽ hiển thị khi nó được gọi. Tôi đã tìm kiếm ở khắp mọi nơi và tôi tiếp tục tìm ra các biến thể của câu trả lời này hoặc những thứ còn hơn cả những gì tôi đang tìm kiếm. Tôi biết rằng bạn phải đưa chúng vào thẻ body trước, bạn không thể ném chúng vào biến trước. Tôi không muốn chúng được hiển thị ngay từ con dơi, chỉ khi được tham chiếu là một biến.

Sau đó, bên trong các thẻ tập lệnh tôi đã thử sử dụng document.getElementById cho mỗi ID hình ảnh tôi đặt như một cách để đưa chúng vào các biến.

var groot = document.getElementById["groot"]
var starLord = document.getElementById["starLord"]
var rocket = document.getElementById["rocket"]
var gamora = document.getElementById["gamora"]
var drax = document.getElementById["drax"]

Tôi đã thử một số điều khác nhau, nhưng tôi không gặp may mắn với bất cứ điều gì tôi đã làm.

hỏi ngày 14 tháng 2 năm 2016 lúc 20:40Feb 14, 2016 at 20:40

InitoveritIntoitOveritintoitoverit

471 Huy hiệu vàng1 Huy hiệu bạc9 Huy hiệu đồng1 gold badge1 silver badge9 bronze badges

6

Trên thực tế, bạn có thể tạo các yếu tố hình ảnh bằng Vanilla JavaScript và khởi tạo chúng trước khi thêm chúng vào tài liệu:

var img1 = document.createElement["img"];
img1.src = "//path/to/image";

... và nối thêm một người bằng cách sử dụng

var groot = document.getElementById["groot"]
var starLord = document.getElementById["starLord"]
var rocket = document.getElementById["rocket"]
var gamora = document.getElementById["gamora"]
var drax = document.getElementById["drax"]

document.body.appendChild[img1];
document.querySelector[".some-class"].appendChild[img1];
document.getElementById["someId"].appendChild[img1];

Lấy từ một số nhận xét được thêm vào câu hỏi của OP:

Có thể ẩn tất cả các hình ảnh lúc đầu với CSS, sau đó tùy thuộc vào điểm số của người dùng, hiển thị hình ảnh tương ứng với điểm số của chúng?

Bạn cũng có thể làm điều đó một cách dễ dàng:

1
Dưới đây là cách JavaScript để gọi hình ảnh được lưu trữ trong VAR không cần thẻ HTML IMG:
var aaa = "//i.imgur.com/ZLAfFHN.jpg";
var bbb = "//i.imgur.com/23lydbM.jpg";

function createimg[key,sizeA,sizeB] {
var theimage = document.createElement["img"];
theimage.setAttribute['src', key];
theimage.setAttribute['alt', 'image'];
theimage.height = sizeA;
theimage.width = sizeB;
document.body.appendChild[theimage];  
}
img {
 vertical-align:top; 
}




Create image A
Create image B  


 Đã trả lời ngày 14 tháng 2 năm 2016 lúc 21:10Feb 14, 2016 at 21:10

L777L777L777
7,2833 huy hiệu vàng35 huy hiệu bạc60 huy hiệu đồng3 gold badges35 silver badges60
bronze badges
Tôi đã gặp vấn đề với hình ảnh của mình không tải nên tôi đã thử cách lưu trữ một hình ảnh khác nhau và tìm thấy một giải pháp rất đơn giản.
Trong đường dẫn, bạn cần đặt hai dấu gạch chéo ngược cho mỗi thư mục vì chương trình diễn giải một dấu gạch chéo ngược khác nhau.
Vì vậy, bạn nên viết nó như thế này.
Image.Src = "C: \\ users \\ Tyler \\ Desktop \\ JavaScript Course \\ Cat.jpg"
 Đã trả lời ngày 23 tháng 9 năm 2020 lúc 19:55Sep 23, 2020 at 19:55
 
 
 Xin chào, tôi không chắc nhưng muốn sử dụng một biến để lưu trữ hình ảnh và sau đó hiển thị nó bên trong bảng một cái gì đó giống như
 i m not sure but wanted to use a variable to store an image and then show it inside the table
 something like
Mở rộng | Chọn | Wrap | Số dòng|Select|Wrap|Line Numbers
 var & nbsp; img1;
 img1 = "c: \ helf.jpg";
 
 và & nbsp; bên trong & nbsp;
 Và với JavaScript, hãy hiển thị khi được yêu cầu.
 img1
 Và với JavaScript, hãy hiển thị khi được yêu cầu.
 
 img1
 is there a way to do such a thing
 pls advice:]
 smile always
 anand 
 Và theo cách này, nó cho thấy hình ảnh có một cách để thực hiện một điều như vậy xin lời khuyên :] mỉm cười luôn luôn là anand

 acoder
16.027 Chuyên gia8TB
 Expert Mod 8TB
 2 tháng 7 '08 #1
Mở rộng | Chọn | Wrap | Số dòng|Select|Wrap|Line Numbers
 var & nbsp; img1;
 img1 = "c: \ helf.jpg";
 và & nbsp; bên trong & nbsp;
 
 2 tháng 7 '08 #2
 sir,the area where i have inserted the code is in bold and unlined
 in the result html it shows [object] as the display instead of the image
Mở rộng | Chọn | Wrap | Số dòng|Select|Wrap|Line Numbers
 var & nbsp; img1;
 img1 = "c: \ helf.jpg";
 và & nbsp; bên trong & nbsp;
 & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;
 img1
 Và theo cách này, nó cho thấy hình ảnh có một cách để thực hiện một điều như vậy xin lời khuyên :] mỉm cười luôn luôn là anand
 2 tháng 7 '08 #1
 Bạn có thể sử dụng Document.Createelement hoặc hàm tạo đối tượng hình ảnh để tạo hình ảnh và sau đó đặt SRC của nó, ví dụ:
var & nbsp; img & nbsp; = & nbsp; document.createelement ["img"];
 img.src = "Image.gif";
 2 tháng 7 '08 #2
 Thưa ông, tôi không thể sử dụng nó đúng cách, hãy kiểm tra mã nơi tôi nên thực hiện các thay đổi để thực hiện nó hoạt động và hiển thị nó Sir, khu vực tôi đã chèn mã in đậm và không có kết quả trong kết quả HTML nó hiển thị [đối tượng] Hiển thị thay vì hình ảnh
 
 chức năng & nbsp; getSearchResults []
 & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; var img = document.createElement["img"];
 & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;
 & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;
 & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;
 & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;"" + img + "" + 
 & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; +& nbsp; "; tồn tại & nbsp; bảo mật & nbsp; thông tin = false";
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;
 & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;
 
 & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;
 & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;
 & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;
 & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;
 & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;
 & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;
 & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;
 & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;
 
 
 & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; "& nbsp;" & nbsp;+
 & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;
 & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;
 & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;
 & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;
 & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; "+& nbsp; rs [" clid "]+" "+
 & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; Ngày-"& nbsp;+& nbsp; & nbsp; rs [" tdat "]+& nbsp;" "& nbsp;+
 & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; Ngày-"& nbsp;+rs [" ddat "]+& nbsp;" "+
 & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;
 & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;
 & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;
 & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;
 & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;
 & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;
 & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;
 & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;
 & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;
 & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;
 & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; ;
 & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;
 & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;
 & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;
 & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; ;
 & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; ;
 
 & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; ;
 & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;}
 & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;
 & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; ;
 & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;}
 & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;
 & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;
 & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;
 & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; ;
 & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;
 
 & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; ;
 anand 
 & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;}

 & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;
 sir,the area where i have inserted the code is in bold and unlined
 in the result html it shows [object] as the display instead of the image
 & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; ;
 anand 
 & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;}
 & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;
 [HTML]
 
 
 
 var im="//technofriends.files.wordpress.com/2008/03/google_logo_.jpg";
 function create_img[]{
 var div = document.getElementById["pop"];
 var hold=document.createElement["img"];
 hold.src=im;
 hold.border=2;
 div.appendChild[hold];
 }
 
 
 Untitled
Document
 
[/HTML]
 
 

 
 [/HTML]
 Hy vọng điều này sẽ giúp .. Điều này làm việc cho tôi :] Chúc mừng !!
 cheers !! 
 3 tháng 7 '08 #4
 
 Nếu bạn muốn sử dụng nó như thế này: "" + img + "", thì hãy sử dụng IMG để lưu trữ HTML cho hình ảnh.
Mở rộng | Chọn | Wrap | Số dòng|Select|Wrap|Line Numbers
var img = '';
 Hoặc nếu bạn muốn hình ảnh hiển thị động hiển thị  title của một nút hoặc một cái gì đó, thì hãy làm cho nó như thế này trong HTML của bạn: [HTML] [/HTML]
 [HTML][/HTML]
 Và với JavaScript, hãy hiển thị khi được yêu cầu.
Mở rộng | Chọn | Wrap | Số dòng|Select|Wrap|Line
Numbers
document.getElementById['imageId'].style.display = '';
 Hoặc nếu bạn muốn hình ảnh hiển thị động hiển thị  title của một nút hoặc một cái gì đó, thì hãy làm cho nó như thế này trong HTML của bạn: [HTML] [/HTML]

 Và với JavaScript, hãy hiển thị khi được yêu cầu.
 thanks a lot for the help
 it worked and yes i m using it like +img+ inside the td tag
 thanks once again:]
 smile always
 thanks forum
 people like you are examples for how things should be done
 really nice
 god bless
 anand 
 3 tháng 7 '08 #5
 
 Và với JavaScript, hãy hiển thị khi được yêu cầu.
 thanks a lot for the help

it worked and yes i m using it like +img+ inside the td tag
 thanks once again:]
 smile always
 thanks forum
 people like you are examples for how things should be done
 really nice
 god bless
 anand 
 3 tháng 7 '08 #5
 Thanks for appreciating our [forum's] work. :]
 Xin chào Hsriat Cảm ơn rất nhiều vì sự giúp đỡ của nó và vâng, tôi sử dụng nó như + img + bên trong thẻ td một lần nữa
 Harpreet 
 3 tháng 7 '08 #6
 
 ồ! : D Cảm ơn vì đã đánh giá cao công việc [diễn đàn] của chúng tôi. :]
 well i mean it
 because
it feels so nice to see people helping each other where as in real life we dont find a single person supporting each other:[
 good to see good and positive people around:]
 smile always:]
 anand 
 Trân trọng, Harpreet
 
 3 tháng 7 '08 #7
 Xin chào Harpreet Vâng, ý tôi là vì cảm giác thật tuyệt khi thấy mọi người giúp đỡ nhau ở đâu trong cuộc sống thực, chúng tôi không tìm thấy một người nào hỗ trợ nhau :[ Thật tốt khi thấy những người tốt và tích cực xung quanh :] Expert Mod 8TB
 3 tháng 7 '08 #8
 acoder
16.027 Chuyên gia8TB
 Phải là một nơi khá buồn mà bạn sống.
 

			
Chúng ta có thể lưu trữ hình ảnh là biến trong JavaScript không?
			
Trên thực tế, bạn có thể tạo các thành phần hình ảnh bằng Vanilla JavaScript và khởi tạo chúng trước khi thêm chúng vào tài liệu: var img1 = Document. createdEuity ["IMG"]; img1.you can create image elements using vanilla JavaScript and instantiate them prior to adding them to the document: var img1 = document. createElement["img"]; img1.
		
			
Làm cách nào để đặt một hình ảnh trong JavaScript?
			
Tạo phần tử hình ảnh trong JavaScript Tạo một phần tử hình ảnh bằng phương thức createdEuity [] trên đối tượng tài liệu. Sau đó, đặt một URL hình ảnh thành thuộc tính SRC của nó. Cuối cùng, thêm phần tử hình ảnh vào hệ thống phân cấp DOM bằng cách nối nó vào phần tử cơ thể.Create an image element using the createElement[] method on the document object. Then, set an image URL to its src attribute. Finally, add the image element to the DOM hierarchy by appending it to the body element.
		
			
Bạn có thể lưu trữ một hình ảnh trong một javascript đối tượng?
			
Lưu trữ hình ảnh [hoặc bất kỳ loại nội dung nào khác] trong JavaScript [hoặc CSS] được thực hiện bằng cách chỉ định sơ đồ URI đặc biệt cho dữ liệu.Về cơ bản, những gì bạn làm là tạo một đối tượng chuỗi JavaScript bình thường bằng cách sử dụng một định dạng cụ thể, trong đó bạn chỉ định loại nội dung, mã hóa ký tự và dữ liệu được mã hóa dưới dạng chuỗi Base64.. Basically what you do is to create a normal JavaScript String object using a specific format, where you specify the content type, character encoding and the data encoded as a base64 string.
		
			
Hình ảnh có thể là biến?
			
Hình ảnh biến được liên kết với các biến theo cách tương tự như văn bản biến.Kết quả của biểu thức được liên kết với một hình ảnh biến phải là tên tệp hình ảnh. in the same way as variable text. The result of the expression associated with a variable image should be an image file name.