为什么我的图像不会显示在弹出窗口中?

时间:2014-04-07 04:58:07

标签: javascript html coldfusion coldfusion-9 coldfusion-10

我是ColdFushion的新手。我试图创建一个用户可以查看小图片的页面。一旦他点击图片,另一个图像将显示在一个新的弹出窗口中。我不确定我的代码中缺少什么,但是当我点击小图片时,会弹出一个新窗口。即使我设置了新的弹出窗口中也没有图像图像路径。有人可以给我一些关于如何解决这个问题的建议吗?非常感谢!

编辑:我遵循了这个建议并对我的代码进行了一些更改。但是,它仍然无法正常工作。有人能告诉我我失踪了吗?谢谢!

在full_article_view.cfm中:

<!--- retrieve the full article as well as its images --->
<CFQUERY NAME="myQuery1" Datasource="mydb" >
SELECT articles.article_ID, articles.article_title, articles.article_author,    
    articles.article_date, articles.article_content
FROM articles
INNER JOIN article_image_mapping ON articles.article_ID = 
    article_image_mapping.aim_articleID
WHERE articles.article_ID = #URL.ID#
GROUP BY article_image_mapping.aim_articleID
</CFQUERY>

<CFQUERY NAME="myQuery2" Datasource="mydb" >
SELECT images.image_ID, images.image_thumbpath, images.image_fullpath
FROM images
INNER JOIN article_image_mapping ON images.image_ID = article_image_mapping.aim_imageID
WHERE article_image_mapping.aim_articleID = #URL.ID#
</CFQUERY>


<!DOCTYPE html>
<html>
<head>
    <title>Hi</title>
    <meta charset="UTF-8">
</head>
<body>
    <!--- Page Title --->
    <h3>Full Article View</h3>

    <!--- Page Content --->
    <div align="left">
        <!--- Display article title, author, date, and full content --->
        <cfoutput query="myQuery1">
            <b>#ucase(myquery1.article_title)#</b>
            <hr>
            <p style="color:##848181; font-size:12px">#myquery1.article_author#    
                            :: #myquery1.article_date#</p>
            #myquery1.article_content#<br/>
        </cfoutput>
        <br>
        <!--- Display images associated with article--->
        <cfoutput query= "myQuery2">

            <img src="#myquery2.image_thumbpath#" alt="image thumbnail"
            onClick="ColdFusion.Window.create('Window1', 'This is a CF window',
            'full_img.cfm?toshow=#myquery2.image_fullpath#',
            {x:100,y:100,height:300,width:400,modal:false,closable:true,
            draggable:true,resizable:true,center:true,initshow:true,
            minheight:200,minwidth:200})">

        </cfoutput>


    </div>
</body>
</html>

在full_img.cfm中:

<cfparam name="url.toshow" default="">

<cfoutput>
<img src="#url.toshow#" alt="full image">
</cfoutput>

1 个答案:

答案 0 :(得分:2)

失败的原因是因为cfwindow期望加载的URL返回文本而不是二进制数据。当你说ColdFusion.Window.create的第三个arg是图像源时,你基本上试图将二进制图像数据加载到窗口内容中,这将无效。

有一个简单的解决方法。建立一个新的CFM,无论你想要什么,都可以使用这样的代码:

<cfparam name="url.toshow" default="">
<cfoutput>
<img src="#url.toshow#">
</cfoutput>

此CFM只接受图像的URL参数并呈现HTML以加载它。然后修改原始代码以使用此新网址:

onClick="ColdFusion.Window.create('Window1', 'This is a CF window',
'test3.cfm?toshow=#urlencodedformat(iurl)#',

在上面的示例中,test3.cfm是我的测试文件。

是的 - 也停止使用CF UI的东西。 ;)