I built an ASP.NET MVC web application from template in Visual Studio 2019. I have copied some .png files into a new folder - images - and copied it underneath my project folder.
I modify my .cshtml file added in <img src="~/images/img1.png" />, but when I run directly from the IDE, the image does not show up. Why?
I have tried below
copy images folder to different places, such as App_Data, Content, Views
Change the cshtml to be
<img src="~/Content/images/img1.png" />
<img src="~/images/img1.png" />
<img src="~/img1.png" />
<img src="img1.png" />
I also tried to change the property of the file
Build -> Resource
Copy to Output -> Always
None of them works.
Help!
You can do following steps in order to resolve your problem:
1) First you need to check if the files copied in new folder are included in your project. If not then, in visual studio, right click your files and select include into the project.
2) Secondly, you can check into the browser console which you will find in developer tools of the browser. Then you will be able to find out the root cause of the problem..
Related
I have just deployed my first ASP.NET 4.7 Application to Azure but on the deployed website the background image is missing. The background image loads without problem on local server and it is located in /MyApplication/Content/Images/bg.jpg.
I tried to log on to Azure console and found that in fact the entire Images folder is not uploaded (but the other files in the Content folder are there).
How do I include the Images folder when deploying to Azure? Is there some settings that I need to adjust during deployment or codes that I need to change in my Application?
Thank you.
After reproducing from our end we have observed that in order to make the folder content visible it needs to hold some files. We have manually added files by navigating through folder explorer but couldn't able to see any file being added in VS. So after adding the below lines to .csproj we could able to see the folder and its contents being added after deployment.
<ItemGroup>
<Content Include="Content\Images\**\*" />
</ItemGroup>
RESULT:
REFERENCES: How to include custom folders when publishing a MVC application?
:(
Images are showing up fine when local:
but when I upload it to my server it doesn't like the link?
live demo
I saw some SO's that had similar problems and was told to "img src="~/..." but that's not working.
Here's my code:
<img src="~/Content/Images_fixed/#(item.link).scale_20.jpg" width=" 190" height="130" />
here's my content folder:
It shows "nothing" in folder but if I click 'show all' i see the images. All the images are in the folder as well so that's not the error (as you can see they load fine locally)
EDIT
you will see the images working on my server but that's only because I am using this
<img src="http://www.jdmdev.net/sweetscomplete/images/#(item.link).scale_20.JPG" />
instead of <img src="~/Content/Images_fixed/#(item.link).scale_20.jpg" /> So my problem is still here it is not solved for some reason when you upload to your project it doesn't use same links, or possibly the images don't get uploaded(even though they appear on github just fine).
RESOLUTION
The cause: When you import images in visual studio, you need to 'include in project'. It will work locally, but once you put it on a live server it will no longer see the images. You must include in project, re-open visual studio and update your SVN that your server is retrieving the build from.
Try to include these images in your project, then try to publish your site. Maybe they are not uploading onto your server.
UPDATE:
If you 'Show All Files' in your project in Visual Studio, and then 'Include in Project' all your images, then they will be added to .csproj file. Then you can commit your changes to github (including the .csproj file) and allow Azure to build your project and upload the files to your server.
I have small issue where I am not able to find solution. My web application in say E folder and I want to locate image to C Folder say C:\Documents and Settings\Administrator\My Documents\My Pictures, How can I do that?
I can't copy those images to my soruce folder, because there are tons of images, and I don't want to double a space.
I tried to find solution, and I got something like this :
<img src="file:///C|/Documents and Settings/Administrator/My Documents/My Pictures/Thomo.jpg" width="600" height="400" alt="" />
This is running fine from Adobe Dreamweaver but its not running in Visual Studio.
Thanks,
Hakoo Desai.
You can add a vitual path in your web application and point it to your C folder.
I created a C# web project with MSVS 9 and thats all i know about my configurations.
In my browser i can access any aspx files i have in my project. However when i use http://localhost:3288/img/test.png i see nothing. The working directory is ./root, the png file is in ./root/img/test.png How do i have ASP.NET display my images and everything else in the folder? (and subfolders).
Is the .png included in the solution?
When you hit the "play" button your essentially starting up a new website ( localhost:2383 ) so if its not in the solution it won't be copied over to the new, temporary, website that the debugger attaches too.
If this is the problem a quick fix is to hit the "Show all Files" button on the top of your solution explorer, this will show all the files in that folder on your hard drive. Then right click on the .png you want to include and hit "Include in Project".
Based on your comment your only solution is to actually create an IIS site for your solution with the root dir the same as your web project. Then in the project properties you'll have to tell the debugger to attach to your local IIS instead of visual studios. Not sure the exact click path, right click on your project and go to properties, look for debugging options.
Give a look to the ASP Image control , you can specify paths starting in your app root (~):
<asp:Image id="Image1" runat="server"
ImageUrl="~/Images/image1.png"/>
Or you can use relative paths to the page that are displayed.
Check this article about ASP .NET Website Paths.
I am working on an ASP.NET MVC web application, and am working on the Web Setup portion. We are using SVN for version control. One of the issues is that the we are currently having is that the web designers modify and add a lot of html, css and js files that end up in the Content folders, but they don't add them to the VS project, so the new files don't get included in the installer.
One option is that we have to try to teach them to always go into VS and manually add the files, but we're on a large project and it's getting down to crunch time, so trying to get people to learn something new in a technology that they don't know will result in too many mistakes, so I'd like to work around that if possible.
Is there some way to get the setup project just to include files from a folder on the file system, instead of a project's designated content files?
Thanks!
I think I've figured it out:
Make sure that the installer project includes the Content Files for the web app. Then go into the web app's csproj file with a text editor and find the ItemGroup where the static Content files are listed. Then add an entry with a wildcard in it and the installer will package them in.
<ItemGroup>
<Content Include="Content\test.html" />
<Content Include="Content\*.html" />
<Content Include="Content\*.gif" />
<Content Include="Content\*.css" />
<Content Include="Content\*.jpg" />
<Content Include="Content\*\*.js" />
Right click on the folder in the File System view of the Web Setup project, and select Add, File...
It doesn't look like you can add an entire folder this way though, so you would have to add every file individually to the Setup program.
EDIT:
Aren't all files from your project folder included in a WebSite project in Visual Studio? Then it's just a case of having your WebSite project and Web Setup project in the same solution, then right-click on the Web Application Folder in the Web Setup project, select Add, Project Output... and then select the WebSite Project in the drop down and Content Files from the list box and click OK.
Unfortunately I don't think there is an out of the box way to do this, as projects maintains references to the files individually.
You could achieve what you need via a custom macro, or asking your other team to edit the .csproj XML file (perhaps simpler or riskier, depending on their background).