Image is not showing MVC-5

Question

0.00/5 (No votes)

See more:

C#

**In browser view source:**
<img src="D:\VS 2013\BusinessClass2\BusinessClass2\Img\butterfly(Butterfly).jpg" />
but image is not showing at all.
**In Controller:** 
string name = Path.GetFileNameWithoutExtension(fileName); //getting file name without extension  
string myfile = name + "(" + employee.Emp_name + ")" + ext; // append Employee name
var path = Path.Combine(Server.MapPath("~/Img"), myfile);

What I have tried:

**In View:**
<img src="@Html.Raw(item.Emp_image)"/>
**also tried:**
<img src="@Url.Content(item.Emp_image)"/>

Posted 2-Sep-16 22:58pm

tahirraza21

Updated 3-Sep-16 11:29am

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

David_Wimbley · Accepted Answer · 2016-09-03T11:29:00

Solution 1

If your image is not showing its because it does not exist. Make sure the file D:\VS 2013\BusinessClass2\BusinessClass2\Img\butterfly(Butterfly).jpg exists and that your web application has proper security rights to that file/directory.

Posted 3-Sep-16 11:29am

David_Wimbley

Comments

tahirraza21 3-Sep-16 17:34pm

An image with the same name is present in that particular folder.. is there any other way to save only ~\Img\pic.jpg rather than to save the whole root directory path

David_Wimbley 3-Sep-16 17:40pm

When you say save only ~/Img/pic.jpg are you saying you are saving the file path in the DB?

tahirraza21 3-Sep-16 17:46pm

Yes ofcourse .. let suppose i run this Solution to any other machine which didn't have "D:" drive ,u better know what would happen??

David_Wimbley 3-Sep-16 17:55pm

You need to either host all files in a folder within your projects solution.

For example, you should have a folder labeled Content. Inside that folder, add another called Images. Then the directory you would save would be ~/Content/Images. In another column, you could store the file name and then concat those two columns to get the file path.

If you don't want to concat, then you would just store ~/Content/Images/<image>.png in that column. In your view you would then use <img src='@Url.Content("~/Content/Images/<image>.png")' /> to view that file.

Displaying the file in this manner will eliminate the need for a d:\ drive on systems computer this app gets deployed on.

tahirraza21 3-Sep-16 18:02pm

Sounds good.I'll try this logic too. Can u plz clear one more thing what would b razor syntax then?
@Url.Content(item.image_path)?? Or (item.image_path+image_name)

David_Wimbley 3-Sep-16 18:06pm

If you choose to store the entire file in one column your syntax would be

<img src="@Url.Content(Model.image_path)" />

If you choose to store the directory (~/Content/Images/) and file (myimage.png) in two different columns. Your syntax would be

<img src="@Url.Content(Model.image_path + Model.image_name)" />

One note on the last one with two columns, need to make sure you store the trailing slash in the image_path column in your database.

tahirraza21 3-Sep-16 18:20pm

i updated Controller:
var path = Path.Combine(Server.MapPath("~/Content/Img"), myfile);
but it still saving the whole directory
D:\VS 2013\BusinessClass2\BusinessClass2\Content\Img\picture(res).jpg
in view im using foreach loop as i'm also fetching other data too
@foreach (var item in Model) {
<tr>
<td>
@Html.DisplayFor(modelItem => item.Emp_name)
</td>
<td>
<img src="@Url.Content(item.Emp_image)" height="150" width="140" style="border:solid" />
</td>
still not working,it looking simple but im new to MVC

David_Wimbley 3-Sep-16 18:35pm

Your problem is your database/wherever is storing D:\VS 2013\BusinessClass2\BusinessClass2\Content\Img\picture(res).jpg. You can't store the full file path and expect it to show up where it aught to be.

In your database are you storing ~/Content/Img/picture(res).jpg or D:\VS 2013\BusinessClass2\BusinessClass2\Content\Img\picture(res).jpg.

You've mentioned you do view source and it points to D:\VS 2013\BusinessClass2\BusinessClass2\Content\Img\picture(res).jpg which leads me to believe your not storing the value in your database correctly. In this specific instance you should be storing ~/Content/Img/picture(res).jpg in your database if storing the image location in one column.

Remember I don't have access to your hard drive so I can't see the exact reason/issue you are having but what i've pointed you in the direction of doing is the way to go.

My suggestion is to break this down into smaller pieces to figure out what the true issue is.

1) Take an image, place it in Content/Image directory of your mvc project. Get that image to render in a view by loading into a model from your controller. Render it via <img src="@Url.Content(Model.myimage)" />.
2) Once you've gotten 1) working, then take a sample from your database and hard code it into your controller. Looping over those values from your controller in similar fashion of what you posted, see if they display.
3) Then implement from database.

If steps 1, 2 work but step 3 does not. The issue is with how you are storing the values in the database. There is no reason steps 1 and 2 shouldn't work unless it is a rights issue on your machine (meaning IIS doesn't have access to a directory or what not which is a possibility once deployed).

tahirraza21 3-Sep-16 19:11pm

Thnx man..1 and 2 are working perfectly.in my opinion im doing something wrong in the controller,so plz take a look(precise code)
[HttpPost]
public ActionResult Create(HttpPostedFileBase file)
{
imagepath img = new imagepath();//Table contains image detail
var allowedExtensions = new[] {".Jpg", ".png", ".jpg", "jpeg" };

img.imagee = file.ToString(); //complete url
var fileName = Path.GetFileName(file.FileName); //only filename
var ext = Path.GetExtension(file.FileName); // extension
if (allowedExtensions.Contains(ext)) //extension check
{
string name = Path.GetFileNameWithoutExtension(fileName); //file name without extension
string myfile = name + ext;
var path = Path.Combine(Server.MapPath("~/Content/Img"), myfile);
img.imagee = path;
obj.imagepaths.Add(img);
obj.SaveChanges();
file.SaveAs(path);
return RedirectToAction("Create");
}
else
{
ViewBag.message = "Please choose only Image file";
}
return View();

David_Wimbley 3-Sep-16 19:23pm

Show me your code in View/what your model says. I think i see the problem but need to know what the view is doing.

tahirraza21 3-Sep-16 19:26pm

View:
<table class="table">
<tr>
<th>
@Html.DisplayNameFor(model => model.imagee)
</th>
<th>
@Html.DisplayNameFor(model => model.name)
</th>
<th></th>
</tr>

@foreach (var item in Model) {
<tr>
<td>

<img src="@Url.Content(item.imagee)"/>
</td>
<td>
@Html.DisplayFor(modelItem => item.name)
</td>

</tr>
}

</table>
Model:
namespace PathInDatabase
{
using System;
using System.Collections.Generic;

public partial class imagepath
{
public int id { get; set; }
public string imagee { get; set; }
public string name { get; set; }
}
}

David_Wimbley 3-Sep-16 19:35pm

So first reason why im confused, in your view you should have a declaration of @model imagepath. Im assuming thats just missing.

Second. In your controller, I don't see you passing the model back to the view. All i see is a RedirectToAction

return RedirectToAction("Create");

Third. If all the above were working as intended. What I think i see is that you are using the uploaded file location from HttpPostedFileBase as the imagee value in your view. I've created this snippet on gist and added comments with notes.

There are things in your controller that don't necessarily add up. But im going to assume they are all working. Regardless, I believe your issue to be with the img.imagee value you are setting.

https://gist.github.com/dwimbley/1451a58e32576beb73c960fb5f436ed1

tahirraza21 3-Sep-16 19:48pm

Thnks alot,I am so thankful for all your support.its working absolutely perfect

David_Wimbley 3-Sep-16 20:28pm

Glad to hear it worked out. If you have any other issues happy to help.

tahirraza21 3-Sep-16 20:37pm

As i said earlier MVC is new to me,coming frm Classic ASP.I'm creating small projects like to save virtual properties,images in DB,how to handle cascading dropdownlist, checkbox values etc.facing issues but trying my best to overcome these issues by searching and reading different blogs of peoples like You :-)

tahirraza21 8-Sep-16 0:16am

Hi David.i stucked in a senseless scenario but i know u can take me out of it.
*Is it possible to insert multiple image paths in a single column in DB..
i.e. ID | Name | Image_Path
1. abc. Multiple. ImgPaths
*retrieve all image paths
I don't want descriptive code just tell me a way, so i can handle this weird situation.

David_Wimbley 8-Sep-16 11:26am

So you want to store multiple images in a single database row? Or Is it you want to know the schema for storing multiple images in a single column?

I would suggest the storing 1 image per row. So single column multiple rows.

The way you would do that is something like

DECLARE @Images TABLE (
Id INT IDENTITY(1,1) NOT NULL PRIMARY KEY,
ImagePath varchar(255) NULL
);

INSERT INTO @Images (ImagePath) VALUES ('c:\path\to\image\1.png');
INSERT INTO @Images (ImagePath) VALUES ('c:\path\to\image\2.png');
INSERT INTO @Images (ImagePath) VALUES ('c:\path\to\image\3.png');
INSERT INTO @Images (ImagePath) VALUES ('c:\path\to\image\4.png');
INSERT INTO @Images (ImagePath) VALUES ('c:\path\to\image\5.png');

Make sense?

Then in your code, if you use entity framework. You'd access it by using

foreach(var image in context.Images)
{
var mypath = image.ImagePath;
}

Is that what you were looking for?

tahirraza21 8-Sep-16 11:38am

Tables I've :
Customer (contains basic info)
TaskDetail (TaskID,CustomerID,here i want to save images provided by a customer ). It means in a single row multiple image paths can be inserted,it can b 1 image path or 2 or may b more than 2
Note: option to upload multiple images through FileUpload is dynamic ,

David_Wimbley 8-Sep-16 13:18pm

So if i understand you correct, you want to store multiple images in one row.

So to answer your question as you've asked. You should save you files to a single column using a separator...something like the Pipe symbol -> | or two arrows <<. So multiple image paths in one row would look like c:\path\to\image1.png|c:\path\to\image2.png.

From there you would use .Split in C#. so you'd do.

foreach(var item in context.Customer)
{
var images = item.ImagePath.Split('|');

foreach(var img in images)
{
//Do something with your images here.
}
}

Is that what you were looking for?

However i would advise against this. Storing multiple images in a single row would indicate you need to adjust your schema. Something like

DECLARE @Customer TABLE (
Id INT NULL,
TaskId INT NULL,
)

DECLARE @Images TABLE (
Id INT NULL,
CustomerId INT NOT NULL,
ImagePath varchar(255) NULL
);

This way you can have 1 single image per row in your @Images table with many different images, that link back to 1 customer. A 1 to many relationship.

tahirraza21 8-Sep-16 15:55pm

Ohhh yes A 1 to many relation exactly, what i understand :
Customer(CusID,basic info )
Task (TaskID,CusID,Detail)
Images (ImgID,imagePath,TaskID)
U want me to go with this schema?

David_Wimbley 8-Sep-16 15:59pm

Hey tahirraza21, i assume your coworkers with OP?

Anywho, yea if your link is from Task to Image, then correct your Foreign Key here is TaskId.

This would be the best way to go about your issue as I understand it. But also, do what fits your needs. If this is from scratch and you are able too, normalizing your DB is the best route to go. If you are stuck and have to do it in a single column, what i mentioned above with splitting the string is one option to do what you need.

tahirraza21 8-Sep-16 16:07pm

Ok if i go with this schema, then can i save multiple image paths in different rows on a single click?

I didn't understand what u asked?
"Hey tahirraza21, i assume your coworkers with OP?"

David_Wimbley 8-Sep-16 16:29pm

I was just saying i was talking to Member 9468137, the original poster of this question then you popped in. I just thought you two might work together.

But to answer your question yes. If you were to use this schema you can upload multiple files and save them in single click.

The psuedo code for this would be something like

var task = new Task();
_repo.Save(task);

//Get the task id to tie to all file/images being uploaded
var taskId = task.Id;

foreach(var file in files)
{
var img = new Image();
img.TaskId = taskId;
img.Path = file.Path;
_repo.Save(img);
}

Then to query out your images using this schema, you would do.

SELECT * FROM Tasks AS A
JOIN Images AS B ON B.TaskId = A.TaskId

So you will get duplicate task items due to the one to many relationship between Task and Images.

Ex: If task 1 has 3 images, it will show up 3 times in that query but in reality its showing up 3 times due to there being 3 images tied to it.

tahirraza21 8-Sep-16 16:36pm

I'm the same person jst updated my profile.sounds like it will work and much understandable scenario.
Thanx David im going to try out this

David_Wimbley 8-Sep-16 16:40pm

Ah ok sounds good. Youre welcome. Feel free to email me at dwimbley at outlook.com. Replace the at with @. I'll be happy to help you as best as I can when I am able to.

tahirraza21 8-Sep-16 16:46pm

Thats cool ... thanx once again David :)