为什么我的图像没有显示在弹出窗口中？答案

【问题标题】：How come my image is not displayed in the pop up window?为什么我的图像没有显示在弹出窗口中？
【发布时间】：2014-04-07 04:58:07
【问题描述】：

我是 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>

【问题讨论】：

第一件事：摆脱<cfwindow>:github.com/cfjedimaster/ColdFusion-UI-the-Right-Way/blob/master/…
第一件事：修复 SQL 注入！然后将文档类型更正为<!doctype html>。然后摆脱cfwindow的使用。（如果此时仍然存在问题，请使用新代码更新问题。）
当我们这样做时......摆脱SELECT * FROM。相反，只列出您需要的列（即使您需要所有列....列出它们）。
只是为了接受@Scotts 的评论，由于各种原因，使用SELECT * FROM 通常不是一个好主意，尤其是在具有任何类型连接的查询中。如果此类查询中的任何 2 个表具有相同名称的列，则数据库可能会抛出错误，或者可能仅在这些列前面加上表名，从而使您的代码更难访问它们。此外，如果您通过添加或删除列来更改查询中使用的任何表，如果您使用 ColdFusion 的查询缓存功能，您可能会得到意想不到的结果。

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

【解决方案1】：

它失败的原因是因为 cfwindow 期望加载的 URL 返回文本，而不是二进制数据。当您说 ColdFusion.Window.create 的第三个参数是图像源时，您实际上是在尝试将二进制图像数据加载到窗口内容中，这是行不通的。

有一个足够简单的解决方法。使用如下代码构建一个新的 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 的东西。 ;)

【讨论】：

非常感谢您的建议。我对此真的很陌生。我不确定我是否完全理解您的代码。我对我的进行了一些更改，但它仍然无法正常工作。你介意看看，让我知道我错过了什么吗？提前感谢您的宝贵时间。
出了什么问题？要不你也加上输出，即在img src上面，只输出url.toshow的值。
我认为“点击时”在中不起作用。当我单击图像时，它不会打开一个新窗口。我试图用谷歌网址对其进行测试。 google.com ' {x:100,y:100,height:300,width:400,modal:false,closeable:true, draggable:true,resizable:true,center:true,initshow:true, minheight:200,minwidth:200} )">
不，抱歉。它不起作用。我仍然卡住了。当我单击图像时，什么都没有显示。 =(
好的，你能告诉我们实时服务器上的 URL 吗？哦-等等-我认为您在网址后使用了分号-将其切换为逗号。