Hiển thị hình ảnh trong div bằng javascript?

Question

js của tôi là không tốt, nhưng tôi nghĩ tôi sẽ cần phải sử dụng một số getElementByID suy nghĩ như:

if (a == ‘tick’) 
document.getElementById(‘imageDiv’) = tick.gif 
else 
document.getElementById(‘imageDiv’) = cross.gif 
<div id="imageDiv"></div> 

nhưng không hoạt động.

Answer 1

Sử dụng tính năng này, bạn nên lo lắng k.

<script type="text/javascript"> 
function image(thisImg) { 
    var img = document.createElement("IMG"); 
    img.src = "images/"+thisImg; 
    document.getElementById('imageDiv').appendChild(img); 
} 
if (a == 'tick') { 
    image('tick.gif'); 
} else { 
    image('cross.gif'); 
} 
</script> 
<div id="imageDiv"></div> 

Answer 2

Hãy thử điều này thay vì:

document.getElementById('imageDiv') 
    .innerHTML = '<img src="imageName.png" />'; 

Hoặc bạn có thể tạo ra yếu tố hình ảnh động như thế này:

var par = document.getElementById('imageDiv'); 
var img = document.createElement('img'); 
img.src = 'put path here'; 
par.appendChild(img); 

Cũng lưu ý rằng bạn nên sử dụng dấu nháy đơn hoặc dấu ngoặc kép không ‘ nhân vật cho chuỗi.

---

Vì vậy, đây là cách mã của bạn nên là:

var imgName = a === 'tick' ? 'tick.gif' : 'cross.gif'; 
document.getElementById('imageDiv') 
    .innerHTML = '<img src="' + imgName + '" />'; 

Hoặc cách khác:

var imgName = a === 'tick' ? 'tick.gif' : 'cross.gif'; 
var par = document.getElementById('imageDiv'); 
var img = document.createElement('img'); 
img.src = imgName; 
par.appendChild(img); 

Hoặc nếu bạn muốn áp dụng hình ảnh của bạn để div nền, thì đây là những gì bạn cần :

var imgName = a === 'tick' ? 'tick.gif' : 'cross.gif'; 
document.getElementById('imageDiv').style.backgroundImage = 'url('+ imgName +')'; 

Answer 3

Để hiển thị hình ảnh trong một div bạn phải thiết lập nó như là hình nền:

document.getElementById(‘imageDiv’).style.backgroundImage = 'url(tick.gif)'; 

Answer 4

document.getElementById('imageDiv').innerHTML = 
'<img src="' + (a == 'tick'?'tick':'cross') + '.gif">';