如何在 HTML 页面上显示图像

Question

我正在开发一个 ASP.NET MVC 4 web api 来显示与公司相关的产品图像。在数据库中，我存储了 CompanyID 和 CompanyProductImageURL 或 CompanyProductImageFilepath。现在使用我的 web api，当我单击“显示图像”按钮时，我想在同一页面上显示产品图像。现在，网址是 localhost:1111/ViewCompanyProductImage.html ；当我输入 CompanyID =31 并单击“显示图像”按钮时，新选项卡将打开，其中包含 url http://localhost:1111/api/Images/?CompanyID=31，然后与该公司关联的 CompanyProductImageURL 或 CompanyProductImageFilepath 在另一个选项卡中打开。我希望图像显示在“显示图像”按钮下的 localhost:1111/ViewCompanyProductImage.html 中。这是我的代码。

    webapiconfig.cs 
public static void Register(HttpConfiguration config)
        {
               config.Routes.MapHttpRoute(
                name: "ImagesApi",
                routeTemplate: "api/Images/{companyid}"
                defaults: new { Controller = "Images", companyid = @"\d+" }
            );}

----Controller

    public class ImagesController : ApiController
    {
    private static T ConvertFromDBVal<T>(object obj)
        {
            if (obj == null || obj == DBNull.Value)
            {
                return default(T); // returns the default value for the type
            }
            else
            {
                return (T)obj;
            }
        }

    [System.Web.Http.AcceptVerbs("GET")]
        public HttpResponseMessage Get(int companyid)
        {
            Images oldImages = new Images();
            string sql = "select companyid,companyproducturl from [dbo].[CompanyImage]  WHERE companyid = @companyid";
            using (SqlConnection connection = new SqlConnection(WebConfigurationManager.ConnectionStrings["connection"].ConnectionString))
            {
                using (SqlCommand query = new SqlCommand(sql, connection))
                {
                    SqlDataReader rdr;
                    query.Parameters.Add(new SqlParameter("@companyid", companyid));
                    query.CommandType = CommandType.Text;
                    connection.Open();
                    query.CommandTimeout = 90;
                    rdr = query.ExecuteReader();
                    if (rdr != null)
                    {
                        while (rdr.Read())
                        {
                            oldImages.companyid = ConvertFromDBVal<int>(rdr["companyid"]);
                            oldImages.companyproducturl = ConvertFromDBVal<string>(rdr["companyproducturl"]);
 }
                    }
                }
            }
            if (oldImages.companyid == 0 )
            {
  throw new HttpResponseException(Request.CreateErrorResponse(HttpStatusCode.NotFound, String.Format("No records found for companyid: {0} ", companyid)));
            }
            HttpResponseMessage response = new HttpResponseMessage(HttpStatusCode.OK);
            System.Diagnostics.Process.Start(oldImages.imageproducturl);
           return response;
       }


---view
 public class Images
    {
        [Required(AllowEmptyStrings = false, ErrorMessage = "companyid Required")]
        [Range(1, 10000)]
        public int companyid { get; set; }
        [Required(AllowEmptyStrings = false, ErrorMessage = "imageproducturl Required")]
        public string companyproducturl { get; set; }
     }

--index.cshtml

<div id="body">
    <section class="featured">
        <div class="content-wrapper">
            <hgroup class="title">
                <h1> Web API!</h1>
            </hgroup>
        </div>
    </section>
    <section class="content-wrapper main-content clear-fix">
        <p>
            For API documentation: @Html.ActionLink("API", "Index", "Help", new { area = "" }, null)
        </p>
        <p>
           View Company Images:<a href="ViewCompanyProductImage.html">Click Here!</a>
        </p>

    </section>
</div>

--ViewCompanyProductImage.html
<div class="jumbotron" align="center">
    <h1>Images Web API</h1>
    <p class="lead"></p>
</div>
<div class="row">
    <div class="col-md-4" align="center">
        <div class="first" align="center">
            <form action="api/Images/" method="get" target="_blank">
                companyid:
                <br />
                <input type="text" name="companyid"><br>
                <td>
                    <input type="submit" value="Show Image" />
            </form>
        </div>
     </div>
</div>

如何在 localhost:1111/ViewCompanyProductImage.html 本身上显示产品图片？ 谢谢 回复

Answer 1

您可以使用 JavaScript 来做到这一点。

在页面上放置一个图像元素，给它一个 ID，然后单击按钮，而不是提交，找到图像元素并将其 src 属性设置为所需的 URL。

<img src="" id="companyImage" />

<input type="text" name="companyid" />
<input type="button" value="Show Image" onclick="previewImage" />

然后在 JS 中：

function previewImage() {
    var companyId = getElementById('companyid').value;
    getElementById('companyImage').src = "api/Images/?companyID=" + companyId;
}