मैं कैसे HTML छवि src टैग

Question

करने के लिए एक जावास्क्रिप्ट चर जोड़ सकता हूँ मैं जानता हूँ कि इस उत्तर यहाँ से बाहर है, लेकिन मैं इसे खोजने में असमर्थ किया गया है (या कम से कम पहचान यह जब मैं इसे देखा!)। मैं jquery के लिए एक सापेक्ष नोब हूँ, तो कृपया मेरे साथ भालू।

समस्या:

मैं 20 छवियों, नामित के माध्यम से 20.png 1.png है। जब भी उपयोगकर्ता एक बटन क्लिक करता है तो मैं यादृच्छिक रूप से प्रदर्शित करने के लिए एक अलग छवि चाहूंगा।

क्या काम कर रहा है:

मेरे जावास्क्रिप्ट कोड यादृच्छिक संख्या उत्पन्न करने के लिए इस तरह दिखता है:

var randomImage = 1 + Math.floor(Math.random() * 20); 

क्या नहीं है ...

मुझे क्या करना कोशिश कर रहा हूँ परिणाम पार जाते हैं मेरे एचटीएमएल दस्तावेज़ में छवि के नाम के रूप में, ताकि यह कुछ इस तरह पढ़ा जा सके:

<img id="randImg" class="img_answer" src="randomImage.png"> 

मैंने concatenating की कोशिश की, लेकिन यह पता लगाने के लिए प्रतीत नहीं कर सकता। क्या मुझे ऐसा फ़ंक्शन बनाने की आवश्यकता है जो आईएमजी आईडी या कक्षा को प्रभावित करे? क्या कोई मुझे ऐसा करने के सबसे साफ तरीके से इंगित कर सकता है?

Answer 1

var randomImage = 1 + Math.floor(Math.random() * 20);  
var imgName = randomImage+".png"; 
$("#randImg").attr("src",imgName); 

डेमो: http://jsfiddle.net/a9Ltw/

Answer 2

बस कुछ डिफ़ॉल्ट छवि img टैग को प्रदर्शित कुछ भी नहीं रोकने के लिए जोड़ने के उपयोगकर्ता JavaScript अक्षम है अगर, और फिर jQuery में एक सा का उपयोग $("#randImg").attr("src", randomImage + ".png");

Answer 3

वर्तनी इसे बाहर सिखाने में मदद करने के :

<img id=randomImage /> 

:

अपने पृष्ठ पर आप कुछ इस तरह होगा

और शायद सिर जब तक आप लोड करने के लिए एक चुनते ही छवि को छिपाने के लिए, इस:

<style> 
#randomImage { 
    width: 400px; height: 200px; /* or whatever the dimensions are */ 
    visibility: hidden; 
} 
</style> 

फिर अपने जावास्क्रिप्ट में

:

var ordinal = 1 + Math.floor(Math.random() * 20); 
$('#randomImage').css('visibility', 'visible').attr('src', ordinal + '.png'); 

तो एचटीएमएल img टैग बाहर देता है , और कुछ शुरुआती सीएसएस इसके आयाम सेट करता है और इसे छुपाता है इसलिए कुछ ब्राउज़रों में कोई बदसूरत टूटी हुई छवि आइकन नहीं है - बस एक खाली जगह।

अंततः जावास्क्रिप्ट लोड और रन करता है, जो एक यादृच्छिक ordinal निर्धारित करता है। जावास्क्रिप्ट की दूसरी पंक्ति आईएमजी को दृश्यमान बनाने और यादृच्छिक छवि में इसके स्रोत विशेषता को सेट करने के लिए jquery को कॉल करती है।

Answer 4

$(document).ready(function() { 
    var randomImage = 1 + Math.floor(Math.random() * 20),  
       img = randomImage + ".png"; 

    $("#randImg").attr("src", img); 
}); 

Answer 5

var thesoruce = "http://localhost:8080/content/dam/admin/" + id ; 

g_fb.find('p').append('<img src= '+thesoruce +' height="250px" width="600px">');