如何通过JavaScript函数动态显示图像 [英] How to show an image dynamicaly tghrough javascript function

问题描述

hello everyone,

      I want to show image in a website, in which image should be selected dynamically from the database.....through a javascript function.....i am using <img> tag inside <item template> of a datalist......i had bind datalist through datasource......following isa the codea-behind for datalist......



<pre lang="cs">con.Open();
        cmd = new OleDbCommand(&quot;Select ID, PrjctName, Description, Facility, Status from Project&quot;, con);
        da = new OleDbDataAdapter(cmd);
        ds = new DataSet();
        da.Fill(ds);
        List_cmpltd.DataSource = ds;
        List_cmpltd.DataBind();
        con.Close();</pre>


this code is working properly.....
& following is the code for datalist in .aspx page.......


<pre lang="xml">&lt;asp:DataList runat=&quot;server&quot; ID=&quot;List_cmpltd&quot;&gt;
                    &lt;ItemTemplate&gt;
 &lt;td style="text-decoration: blink" valign="top"&gt;

                    &lt;div onload="fun('&lt;%# Eval("Status")%&gt;')"&gt;
                    &lt;img src='' id="img1" name="img1" alt="" width="100" height="50" /&gt;
                    &lt;/a&gt;
                   &lt;/div&gt;

            <pre>        &lt;table cellpadding=&quot;0&quot; cellspacing=&quot;0&quot;&gt;</pre>


<pre lang="xml">&lt;/tr&gt;
                    &lt;/table&gt;
                    &lt;/ItemTemplate&gt;
                    &lt;SeparatorTemplate&gt;&lt;/SeparatorTemplate&gt;
                    &lt;/asp:DataList&gt;</pre>



& following isa the javasacript function i hv used for that......



<pre>&lt;script type="text/javascript"&gt;
    &lt;!--
    function fun(str)
    {
    if(str=="Completed")
    {
    img1.src= 'images/cmpltd.gif';
    }
    else if(str=="Current")
    {
    img1.src= 'images/crnt.gif';
    }
    else if(str=="Upcoming")
    {
    img1.src= 'images/upcmng.gif';
    }
    else
    {
    img1.src= 'images/plan.gif';
    }
    //--&gt;
    &lt;/script&gt;</pre>
/

推荐答案

正如Zaibshah先生所说，如果直接使用Image如何获取对象，必须获取Image元素并设置源地址..

As Mr.Zaibshah said, How can you get the object if Image directly, You have to get Element of Image And set The Source Address..

var img=document.getElementById("img1")

在设置图像Src时，如何获取图像的地址，以及图像文件夹位于何处(如果位于项目内，则为"/images/image1.jpg").

And while setting image Src, How you get The Address of image, And where Does the Images folder located(if it is within your project then "/images/image1.jpg").

除非您全局声明它们，否则不能在javascript中使用.net对象或属性.
在您的情况下，您直接访问"img1"，则javascript不知道它是什么.
您需要在var对象中获取img1才能使用它.即

you can not use .net objects or properties in javascript unless you declare them globally.
in your case, you are accessing ''img1'' directly, the javascript doesn''t know that what it is.
you need to get img1 in var object to use it. i.e

var img = document.getElementById("img1");
img.src = "imagePath";

尝试这种方式

Try it this way

这篇关于如何通过JavaScript函数动态显示图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！