How to show profile picture in html without any event in .net mvc

Question

I want to show profile picture of login user in circle form in my project.For that I wrote one function.And From That function I am getting profile picture.But I cant understand how to call this function in html img tag. I tried this

<img alt="image" class="img-circle" src="showProfilePic()>

here showProfilePic() is my function returning profile picture of the login user.

I am using azure blob storage for storing my images. and this is my javascript function function showProfilePic() { $.ajax({ type: "Get", url: "/contollername/functionname", success: function (result) { data = JSON.parse(result); $('#imgProfilePic').attr('src', "data:"+ data.ContentType +";base64," + data.Content); } }); } so in this I am retrieving images from Runner controllers GetProfilePic() method.

check your tags .. do you want solution for .net mvc or html5 JavaScript. How did you store images ? In database or in directory — Rahul, Feb 19 '16 at 04:44
Possible duplicate of [Retrieve image from database in asp.net](http://stackoverflow.com/questions/14935205/retrieve-image-from-database-in-asp-net) — Rahul, Feb 19 '16 at 04:49
http://stackoverflow.com/questions/2482104/how-to-show-a-image-in-database-in-the-image-control-of-asp-net — Rahul, Feb 19 '16 at 04:49
the image url constructed by your function need to fed to `img` tag as source to show in html. for showing the image in circular form , you need to create a circle using css3 and work on it. — dreamweiver, Feb 19 '16 at 05:38

score 0 · Answer 1 · edited Feb 26 '16 at 10:33

You can use <IMG> tag to display images stored in the database by calling another ASP page in SRC attribute of <IMG> tag.

<IMG SRC="ShowPicture.asp?PhotoId=1">

where PhotoId is the ID stored in the database.

Following are the steps which needs to be executed:

Create table Users in MS-Access or SQL server.
Create ShowPicture.asp page.
Call this page using <IMG> tag wherever required.

Create table with the following structure:

Table name: Users

user_id (AutoNumber)
user_name (Text)
user_photo (Ole Object - For MS-Access, and Image data type for SQL server).

Code

ShowPicture.asp is used to display images. You need to pass user ID in querystring, and for that user ID, image will be displayed. Following is the code:

'Declare Variables..
   Dim sql
   Dim rs
   Dim conn
   Dim userID,str

  userID = Request("PhotoId")
  If userID = "" Then userID = 0

  'Instantiate Objects
  Set conn = Server.CreateObject("ADODB.Connection")
  Set rs = Server.CreateObject("ADODB.Recordset")

  'Open connection
  Conn.Open "Provider=Microsoft.Jet.OLEDB.4.0;" & _
            "Data Source=" & Server.MapPath("data.mdb")

  'Get the specific image based on the ID passed in a querystring
   str = "SELECT user_photo FROM users where user_id =" & userID
   rs.Open str, conn,3,3
   if rs.eof then 'No records found
       Response.End
   else 'Display the contents
       Response.ContentType = "image/gif"
       Response.BinaryWrite(rs("user_photo"))
   end if

  'destroy the variables.
  rs.Close
  conn.Close
  set rs = Nothing
  set conn = Nothing

Please note that "Response.contentType" will depend on the type of content you would like to display. For example, to display jpg image, following will be the code:

Response.ContentType = "image/jpg"

To use above page for displaying images, following is the example:

<IMG SRC="ShowPicture.asp?PhotoId=1">
<IMG SRC="ShowPicture.asp?PhotoId=2">

Upload Image

Following example shows how to upload images in database by using ASPSmartUpload component.

Following is the code to upload image:

<FORM METHOD="POST" ACTION="saveFile.asp" 
        ENCTYPE="multipart/form-data" NAME="UploadForm">
   <center>
   Employee Name : <INPUT TYPE="TEXT" NAME="USERNAME" SIZE="30"><br>
   <INPUT TYPE="FILE" NAME="UPLOADFILE1" SIZE="50">
   </center>
   <BR>
   <center><INPUT TYPE="SUBMIT" VALUE="Upload" 
             id=SUBMIT1 name=SUBMIT1></center>
</FORM>

Code to save the image in the database:

Dim myupload
   'declare variables..
   intCount=0

    ' Create Upload Component
    Set myupload = Server.CreateObject("aspSmartUpload.SmartUpload")
    myupload.Upload

    'Create Connection
    Set Conn = Server.CreateObject("ADODB.Connection")
    Conn.Open "Provider=Microsoft.Jet.OLEDB.4.0;" & _ 
              "Data Source=" & Server.MapPath("data.mdb")

    Set Rs = Server.CreateObject("ADODB.recordset")
    Rs.Open "SELECT user_id,user_name,user_photo FROM users", Conn,3,3

    'Select each file
    For each file In myupload.Files
        If not file.IsMissing Then 'Check for missing file
            'Add the current file in database
            Rs.AddNew
            file.FileToField Rs.Fields("user_photo")
            Rs("user_name") = myupload.Form("USERNAME")
            Rs.Update
            intCount = intCount + 1
        End If
    Next
    Response.Write(intCount & " file(s) uploaded.")
    'Destroy the objects...

How to show profile picture in html without any event in .net mvc

1 Answers1