如何将数据库中的图像调用到灯箱 Jquery

本文关键字：调用 Jquery 图像 数据库 | 更新日期: 2023-09-27 18:30:37

有没有办法将图像从我的数据库调用到我的灯箱jquery。我想在我的图片库中调用很多图片：

<%--using multiple="" images="" in="" a="" sequence="", link="" is="" thumbnail=""of="" image--=""%>
          <div>
            Birds<br /><br />
            <a href="images/AmericanGoldfinch_male.jpg" rel="lightbox[roadtrip2]" 
            title="American Goldfinch">
              <img src="images/AmericanGoldfinch_male.JPG" width="60" height="60" 
              alt="" />
           </a>
             <a href="images/birdgroup1.jpg" rel="lightbox[roadtrip2]" 
            title="Mixed Birds">
              <img src="images/birdgroup1.JPG" width="60" height="60" alt="" />
            </a> 
            <a href="images/doves.jpg" rel="lightbox[roadtrip2]" 
            title="Mourning Doves">
              <img src="images/doves.JPG" width="60" height="60" alt="" />
            </a>
            <a href="images/goldfinch_fiesta.jpg" rel="lightbox[roadtrip2]" 
            title="American Goldfinches">
              <img src="images/goldfinch_fiesta.JPG" width="60" height="60" alt="" />
            </a>
            <a href="images/hummingbird.jpg" rel="lightbox[roadtrip2]" 
            title="Ruby Throated Hummingbird">
              <img src="images/hummingbird.JPG" width="60" height="60" alt="" />
            </a>
            <a href="images/RoseBreastedGrosbeak_male.jpg" 
            rel="lightbox[roadtrip2]" 
            title="Rose Breasted Grosbeak">
              <img src="images/RoseBreastedGrosbeak_male.JPG" width="60"                   height="60" alt="" />
            </a>
         </div>
        </form>
 </body>

我将对我的查询提出什么？

如何将数据库中的图像调用到灯箱 Jquery

我建议使用HTTP处理程序，如下所示：

public class ImageHandler : IHttpHandler 
{
    public void ProcessRequest(HttpContext context)
    {
        // Grab ID from query string
        int id = Convert.ToInt32(context.Request.QueryString["roomID"]);
        // Logic here to retrieve image from database
        // Write image to context object to return to browser
        // Set content type to type of image, change to whatever you need it to be
        context.Response.ContentType = "image/gif";
    }
    public bool IsReusable 
    {
        get {
            return false;
        }
    }
}

然后在客户端代码中，您可以调用 HTTP 处理程序，如下所示：

<img src="ImageHandler.ashx?id=1" />

如果视图中的图像只是对图像资源的引用，如下所示：

images/AmericanGoldfinch_male.jpg

然后，您可以遍历数据库记录以发出图像的标记。 例如，假设在您的模型上，您已使用图像文件的 URL 和标题填充了一个名为 Images 的IEnumerable<SomeCustomObject>。 在这种情况下，您的视图将包含如下内容：

<div>
    Birds<br /><br />
    @foreach (var image in Model.Images)
    {
    <a href="@image.Url" rel="lightbox[roadtrip2]" title="@image.Title">
        <img src="@image.Url" width="60" height="60" alt="" />
    </a>
    }
</div>
这将生成与您

手动创建的标记相同的标记，但会动态地为模型中的所有图像生成标记。

那么下一个问题就变成了...图像是由数据库中的 URL 引用的，还是实际存储在数据库中的？ 如果是后者，那么您可能要做的是创建一个单独的操作方法来充当"图像"本身，该方法从数据库中动态返回图像。 首先，您必须更改上面的代码才能使用该操作。 像这样，假设模型上的图像 ID 而不是 URL：

<div>
    Birds<br /><br />
    @foreach (var image in Model.Images)
    {
    <a href="@Url.Action("ActionName", "ControllerName", new { id = image.ID })" rel="lightbox[roadtrip2]" title="@image.Title">
        <img src="@Url.Action("ActionName", "ControllerName", new { id = image.ID })" width="60" height="60" alt="" />
    </a>
    }
</div>

现在的不同之处在于，您可以根据映像的操作名称、控制器名称和 ID 作为路由值动态创建一个映像，而不是对映像使用静态 URL。 接下来，需要创建操作方法。 如果图像只是数据访问层的一个byte[]，则可以让该操作返回File结果。 像这样：

public ActionResult ActionName(int id)
{
    var file = Files.Get(id); // this would be replaced with however you get your file from the database
    return File(file.Data, file.ContentType, file.Name);
}

当然，这是假设您还将名称和内容类型与数据库中的文件一起存储。 如果要将原始文件数据存储在数据库本身中，那么至少存储其内容类型也是一个非常好的主意。

相关文章：