Question

我的Intranet中的视图ASP.NET MVC网站使用Web API在用户将鼠标悬停在文档上时呈现图像缩略图（通常，图形看起来像文档的第一页）。我被困了，因为这段代码以前工作过;我不确定第三方的外部代码修改（或者我的代码坏代码）是否破坏了它，但现在我没有看到图像缩略图。

我很难确定发生了什么。这是我到目前为止所做的：

直接修改代码

这是我通常做的第一件事：假设错误是由于某种错误（或者我忘记做的事情）。我关注的问题领域是这个JavaScript / jQuery片段，就在视图的<script>代码区域内：

    $(".tile2").each(function () {
        $(this).tooltip({ content: "<img src='/jportal/api/portalDocument/thumbnail?u=" + this.id + "' />" });
});

.tile2 类引用适用于在页面上呈现的每个单独文档。 $(this).tooltip *包含缩略图功能的代码。 * this.id 是对每个文件的唯一ID的引用（看起来像一个长32或64个字符的“哈希”，用于在缩略图中呈现文档图形）。 < / p>

我尝试修改工具提示部分中的HTML <img>标记（因为我认为有人修改了它以便错误地渲染），但它仍然失败（缩略图显示其中没有图像）。当我评论整行代码时，根本没有出现预览框架，因此我的理由是问题必须关闭。

查看多个文件以尝试查找不一致（又名“从上方查看问题”）

我尝试查看支持模型和控制器代码，看看问题是否出现在其中任何一个中：

控制器的

Web API控制器寻找转换并返回可呈现的信息：

public HttpResponseMessage GetThumbNailImage(string u)
    {
        string url = new Hex(u);
        HttpResponseMessage response = new HttpResponseMessage();
        using (var webclient = new System.Net.WebClient() { Credentials = SharePointCredential.Credential })
        {
            var data = webclient.DownloadData(url);
            using (var ms = new System.IO.MemoryStream(data))
            {
                using (Bitmap img = new Bitmap(ms))
                {
                    using (Bitmap b = new Bitmap(img, new Size(img.Width / 3, img.Height / 3)))
                    {
                        using (Graphics gr = Graphics.FromImage(b))
                        {
                            using (var ia = new ImageAttributes())
                            {
                                ia.SetColorMatrix(new ColorMatrix(DocumentViewer.gray_matrix));
                                ia.SetThreshold(0.8f, ColorAdjustType.Default);
                                gr.DrawImage(b, new Rectangle(0, 0, b.Width, b.Height), 0, 0, b.Width, b.Height, GraphicsUnit.Pixel, ia);
                                using (System.IO.MemoryStream mms = new System.IO.MemoryStream())
                                {
                                    b.Save(mms, System.Drawing.Imaging.ImageFormat.Png);
                                    response.Content = new ByteArrayContent(mms.ToArray());
                                    response.Content.Headers.ContentType = new System.Net.Http.Headers.MediaTypeHeaderValue("image/png");
                                    return response;
                                }
                            }
                        }
                    }
                }
            }
        }
    }

我继续在这个API控制器调用上抛出断点，看看我是否可以让它们命中，但什么都没发生。这就好像动作从未被使用过，即使为每个文档渲染了一个实际的图形（它是一个通用的X图形，如“找不到图像”）。

模型

我尝试在一些我认为是由API控制器调用的模型文件上抛出断点，但这些断点都没有被击中。（我可以在这里添加代码，但由于调用都没有遍历任何模型，因此可能不值得。）

恢复以前工作的代码版本以进行测试（并观察它们也失败了）

这是真实奇怪的地方。我从过去恢复了一两个代码副本（只是为了查看旧代码是否有效，我确实拙劣了）。先前的副本也无法显示缩略图。

更新：简单修复可以节省一天的时间！（副标题：调试时观看）

感谢那些早些回复的人。正如下面的早期回复中所讨论的，修复程序是通过结合使用浏览器开发人员工具和密切关注我的URL来实现的。这是我做的：

我必须修改呈现每个“工具提示”的javascript代码

<img>代码的src值设置为/jportal/api/portalDocument/thumbnail?u=。这确实是一个糟糕的URL;也就是说，完整的标签会读取类似

<img src='/jportal/api/portalDocument/thumbnail?u=3409802204320321309280342...'/>

当网址需要更接近

<img src='http://...actual site URL prefix (e.g. mywebsite.com).../jportal/api/portalDocument/thumbnail?u=340980...'/>

我昨天在调试过程中偶然发现了这一点，但直到今天早上才把2和2放在一起。我曾尝试直接在<img>标记中插入正确的网址前缀，但仍然失败了：

$(this).tooltip({ content: "<img src='" + '@Model.documentContext' + this.id + ...' /> });生成一个类似于

<img src='http://website.com'/jportal/api/portalDocument...u=340980...'/>

失败了。（你看到额外的单引号，对吗？这似乎搞砸了。）

当我将URL前缀分隔为自己的变量时，它起作用了：

var imageURLPrefix = '@Model.documentContext'; //that whole http://website.com/jportal/api/portalDocument/thumbnail?u= deal
    $(this).tooltip({ content: "<img src='" + imageURLPrefix + this.id + "' />" }); //a little cleaner, AND it works :)

唷！我学到了一些关于网站调试API动作的新知识：我不得不看看我的典型解决方案路径 - 我被抛弃了气味，因为我对我的API动作和模型文件的断点没有被击中;在我查看被破坏的代码（通过查看页面源代码）后，我得到了我需要的东西。 （直到今天我还没有正确应用它。）

Answer 1

我会走这条路来指出问题的位置：

启动fiddler或浏览器开发人员工具（F12）并检查网络活动 - 您的网页实际上是否实际调用此Web API操作？（即从预期的URL获取图像）
假设确实如此，URL是否包含正确的参数？
如果以上所有都正常 - 假设您的服务器出了问题。否则，它的客户端应用程序肯定（浏览器/应用程序javascript代码等），也可能是服务器。

要测试服务器 - 只需使用标准浏览器URL栏导航到您知道应该工作的图像的URL - 如果图像加载服务器正在执行它的部分就好了。

测试客户端应用程序 - 开始使用您知道有效的缩略图的静态URL替换代码等代码部分。（可能只是从服务器上的静态资源加载而不是Web API调用的图像）

如果您确定它是浏览器端，您可以：

使用开发人员工具调试代码以查看出现了什么问题
检查源控件是否有自上一版本工作以来的任何更改
测试其他浏览器（！）也许您的浏览器供应商改变了您的想法。例如，你做了一些不合标准的事情，并严格遵守这个标准。

最后，在这些测试后提供更多信息，以便我们提供更多帮助。

对控制器的Web API调用不起作用，断点未命中，先前版本的代码不再起作用（更新了答案）

1 个答案: