Hello Forum,
I have an issue with a project I was working on. When a user uploads and image and clicks a button, a QR code is generated for that image, so that when the QR code is scanned with the use of a Bar or QR code scanner it will redirect the user to a page where that image will display based on the image id in the database. But in my case, the image did not display.
After scanning a generated QR code, it showed an address and a path where it will redirect to the page to display. So I copied the address with the path to my browser tab and clicked to re direct to the page. When the page displayed, there was no image. Please I need help on this. Thank you
Here is my HTML and code
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" intergrity="sha384-AYmEC3Yw5cVb3ZcuHt0A9w35dYTsvhLPVnYs9eStHfGJv0vKxVfELGroGkvsg+p" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous" />
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<link href='https://fonts.googleapis.com/css?family=Nunito' rel='stylesheet' />
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet" />
<link href="http://fonts.cdnfonts.com/css/renogare" rel="stylesheet" />
<title>Quirver | Certificate</title>
</head>
<body style="background-color: #F5F5F5; font-family: Roboto;">
<form id="form1" runat="server">
<asp:ScriptManager ID="script" runat="server"></asp:ScriptManager>
<div class="wrapper">
<div id="content" style="font-size: 10pt; width: 100%;">
<hr />
<div class="container-fluid shadow-sm p-3 mb5 bg-white rounded" id="card" style="font-family: 'Roboto', sans-serif; width: 90%; margin: 0 auto; border: 1px solid #e4e7e8;">
<asp:Panel ID="pnlContents" runat="server">
<div class="book" style="width: 100%; height: 100%;">
<div class="page" id="parent" style="width: 100%;">
<div class="subpage" style="width: 100%; height: 100%;">
<asp:Image ID="Image3" ImageUrl="~/img/background.png" runat="server" BorderStyle="none" />
</div>
</div>
</div>
</asp:Panel>
</div>
</div>
</div>
</form>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script>
</body>
</html>
C#
protected void Page_Load(object sender, EventArgs e)
{
if (Session["CardId"] != null)
{
BindCardAndQR();
}
}
private void BindCardAndQR()
{
if (Session["CardId"] != null)
{
int id = Convert.ToInt32(Session["CardId"]);
string sql = "SELECT * FROM CertTbl WHERE Id = @Id";
SqlParameter[] parameters = new[] {
new SqlParameter("@Id", id)
};
// Bind Image3 for Card Image
DataTable dt = SelectFromDatabase(sql, parameters);
if (dt.Rows.Count > 0)
{
Image3.ImageUrl = "data:image/jpg;base64," + Convert.ToBase64String((byte[])dt.Rows[0]["image"]);
Image3.AlternateText = "The Image has been found";
}
else
{
Image3.ImageUrl = "#";
Image3.AlternateText = "The Image does not exist in DataBase";
}
// Bind Image4 for QR code
byte[] QRBytes = GetQRCodeBytes(Server.MapPath("~/displaydocument.aspx") + "?Id=" + id);
// Image4.ImageUrl = "data:image/jpg;base64," + Convert.ToBase64String(QRBytes);
}
}
public byte[] GetQRCodeBytes(string url)
{
QRCodeEncoder encoder = new QRCodeEncoder();
Bitmap bi = encoder.Encode(url);
MemoryStream tmpSteam = new MemoryStream();
bi.Save(tmpSteam, ImageFormat.Jpeg);
return tmpSteam.ToArray();
}
public static DataTable SelectFromDatabase(string sql, SqlParameter[] parameters)
{
using (SqlConnection con = new SqlConnection("Data Source=(LocalDB)\\MSSQLLocalDB;AttachDbFilename=|DataDirectory|\\Dataregister.mdf;Integrated Security=True"))
{
using (SqlCommand cmd = new SqlCommand(sql, con))
{
if (parameters != null)
{
cmd.Parameters.AddRange(parameters);
}
using (SqlDataAdapter sda = new SqlDataAdapter(cmd))
{
DataTable dt = new DataTable();
sda.Fill(dt);
return dt;
}
}
}
}
