Images Not Showing in MVC - asp.net-mvc

I am working on MVC4 project and facing a problem.The project on which i am working was developed in web forms.The html of pages is already saved in Database.I am getting this html from DB and showing it on Views. Now the problem is that this Html aslo contains Images and links and these are working fine in web forms application but in MVC images and links are not working i.e images fail to load due to invalid path although i have made the same folder structure. Here is an example.
Suppose i have an image in folder App_Themes/Theme1/Img/download_icon.gif. Now in MVC project if i give this image the src like /App_Themes/Theme1/Img/download_icon.gif it is loaded correctly but if i give it the src like App_Themes/Theme1/Img/download_icon.gif it does not load and this is saved in Db. My question is how can i load all images correctly that come from Db in html?

You got a tricky scenario. Its always a bad practice to keep Html tags in database because it may cause these kind of issues in future, which gives head aches to current developer working on that. As per my opinion there is no solution, but I am suggesting a work around for you to overcome this. This is an issue with virtual directory and hope that we can resloved by Url.content.
Any way your are getting the html from database. So I believe that you have something similar to this.
string htmlContent = getHtmlforPage1()
it will returns you all the html for page one and you use HtmlString() to show it in your view.
You can replace the <img src=blah\blah.img /> with "<img src="+ Url.Content(blah\blah.img") />. all you need is to write down a function to achieve this.
This question will gives you about the need for url.content()
why use #Url.Content
If possible please change avoid storing html in database

Related

How to open a file from Grails app using <a> tag?

This is my first Grails project & I can't seem to do this very simple thing! I am trying to display a list of PDF forms in one page that I have saved under a folder called forms under my_project/grails-app/views/forms and want to open the PDF form in a new window when clicked.
In my .gsp file I am trying to access the forms like this:
Form #1
But that's giving me a 404 error.
I have found couple of solutions like this one or this question (which is very similar to mine)...but first of all, i don't need to upload/download the file. Second, i don't need to render the file either. All I want to do is just click the link and open the PDF file in a new window/tab. Am I saving the PDF files in a wrong place? Please help!! Thank you.
Place your file/directory into grails-app/assets so that you have grails-app/assets/forms/form_one.pdf then you can use the resource tag like this:
Form #1
The grails-app/views directory is used for views rendered by controllers, where as the grails-app/assets directory is used for static and pre-processed assets.

How do I redirect requests for certain images in ASP.NET MVC 4?

I'm integrating a 3rd party jquery plugin into a page on my ASP.NET MVC website and I have found that it expects that the images are in an img folder relative to the page it is on. It generates img tags looking like this:
<img src="img/blah.jpg">
The trouble is, my page is at a URL like mysite.com/mycontroller/view/id and so there is no easy way of putting the img folder in the right place for it to pick up the images. I need the img tags to be like this:
<img src="/Content/img/blah.jpg">
Obviously I could edit the 3rd party javascript to output a different path every time it creates an img tag, but I am wondering whether there is a better way in ASP.NET MVC (perhaps with rerouting?).
(I am very new to ASP.NET MVC and web development, so please tell me if I'm going about this in completely the wrong way).
I would recommend avoiding trying to fix this via routing. It's going to be easier and most performant to edit the script to have the path be correct. Fixing it in the client script is likely as easy as a find and replace or just editing a single string object.

how to use tinymce with images on my website like stackoverflow does

i have tinymce embedded in my website, so if users want to edit content, then can click on an "EDIT" link and it brings up the content in tinymce editor. when they click "Save", i save the html to a database. this works perfect and avoids them calling me when they need content changes as they can go in directly and next time they reload the main page, it loads up their changed content.
they now want to be able to add their own images. I see there is some image support in tinymce as seen here, but in my case, the images would be on their computer.
So i am looking for some advice on how to handle image support using tinymce on my asp.net mvc website similar to how stackoverflow allows you to upload and include an image in your question all in one step
any suggestions?
I guess you need to take a look here:
Best TinyMce editor Image Manager / File upload for Asp.net Mvc
it has a list of tinyMCE file browsers/uploaders/managers which work with MVC :)
I had a similar issue and solved it by;
Allowing the user to upload images which i then stored in the file system.
Once the image was saved then you could use tinyMCE to link to it.
It's a round-about way of doing it but it worked. If your images are stored on a users computer then you're going to need to implement something like this me thinks as you can't assume you can link to the image and if you can you can't be sure the computer will be on.
Maybe you can give this TinyMCE-plugin a try (the official Moxiecode plugins are quite expensive):
http://www.phpletter.com/Demo/Tinymce-Ajax-File-Manager/
I haven't tested it yet, but it's a free add on that allows uploading and selecting files.
HTML 5 supports embedded images. You can embed image in html code as a base64 string.
Example Code:
<img src="data:image/gif;base64,R0lGODlhDwAPAKECAAAAzMzM/////wAAACwAAAAADwAPAAACIISPeQHsrZ5ModrLlN48CXF8m2iQYmmKqVlRtW4MLwWACH+H09wdGltaXplZCBieSBVbGVhZCBTbWFydFNhdmVyIQAAOw==" alt="Base64 encoded image" width="150" height="150"/>
There is a opensource TinyMCE plugin available in github:
https://github.com/buddyexpress/bdesk_photo

Multiple file uploads asp.net mvc

I am facing one serious problem
Technology: Asp.net mvc
I am trying to upload multiple files from the dynamically created file upload control from
javascript.(Attach more file Options).My files are not getting posted to the mvc controller action.i have specified the propert new { enctype = "multipart/form-data" } in my form
still the file is not getting posted.
NB:
1)The file from the first file upload control(which is shown on the first page load is getting posted but the rest which is added using attach more file option is not getting posted)
Many Thanks in advance.
I am using with asp.net mvc for multiple file upload this jquery plugin and it works well: http://www.fyneworks.com/jquery/multiple-file-upload/
In the view you have to include something like this:
<input name="attachments" type="file"/>
And then you have to make an action method in the controller that waits for List<HttpPostedFileBase> attachments
If you can not make your current solution to work this plugin worth a try....
MVC has no built-in way to upload multiple files at once, other than to have multiple <input type="file" /> elements in your page.
You will probably want something a little more advanced, so you can use any number of jQuery plugins that do this, such as http://www.fyneworks.com/jquery/multiple-file-upload or http://www.uploadify.com/
Once the files are uploaded, then you can convert them to thumbnails using any of a number of techniques, some using third party libraries, some using built-in code.. there's lots out there if you look for them.
Here's a nice tutorial with a lot of what you need.
http://www.codeproject.com/Articles/379980/Fancy-ASP-NET-MVC-Image-Uploader

ASP .Net MVC - Images not being shown in published build

I am developing an ASP .Net MVC application and on my dev machine, the application runs as expected and, more importantly, the images mentioned in the CSS file are displaying correctly too.
However, when I publish this application to a testing server, the web app runs fine, but the images are not shown.
If I modify the URL in IE when testing the output from the test server, the image is returned, meaning that the file is there but it just won't appear within the view page when using the site normally.
I have tried alternative servers too, but the result is the same.
To confirm, here's a line from the CSS page referencing the image...
background-image: url('/Content/Images/Logo/myLogo.jpg');
Any suggestions?
Cheers
Brett
The URLs are not correct, likely due to the fact that you are publishing in a subfolder and so they are no longer at the root of the server. I usually use Url.Content( "~/Content/Images/..." ) to build the url instead of hard-coding it. That way it will take into account the routes when building the path.
Example:
<img src='<%= Url.Content( "~/Content/Images/banner.jpg" ) %>' alt="Banner" />
I had the same issue, but I found the reason why it was forcing authentication on the Contents folder.
When a user is not logged in yet, they are classified as Anonymous Authentication. In IIS7 (which is what I am using, guessing it is the same in IIS6) you need to open the authentication window in features view. Then edit the Anonymous Authentication, to use your application pool identity, or the default one, just make sure that user has permissions to read in that folder.
That fixed it for me, hope it works for you.
Possible relative paths are wrong...Possible that they are wrong for CSS file itself. You can use FireBug to see if CSS loaded correctly, then you can examine image request, often in such situations you will see red(error) items. This could help to localize problem.

Resources