:(
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.
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?
I have a bunch of images in a hidden gallery, only shown when a user clicks on a certain button.
On the development server, everything is fine, no errors or issues, but when I deploy my website and open the gallery the images don't show and throw a 404 error in the console (I included the required props).
When I replace the <Image/> component with <img>, everything is fine on the development server and live. Can anyone please help? I searched a lot and I didn't find anything like this issue.
My solution:
I had the same issue and solved it by renaming the image file names.
How the issue arose:
I had renamed the images, only changing uppercase to lowercase letters. This resulted in the files being wrongly named in my github repository. After a rename with new characters, the files were correctly updated on github.
Image Optimization using Next.js' default loader is not compatible with next export.
Possible solutions:
Use next start, which starts the Image Optimization API.
Use Vercel to deploy, which supports Image Optimization.
Configure a third-party loader in next.config.js.
That means: Only assets that are in the public directory at build time will be served by Next.js. Files added at runtime won't be available
To solve this problem. I just used next-optimized-images for static image and next/image for images from the cloud.
Kindly read this article for more understanding: https://dev.to/jameswallis/next-image-and-next-optimized-images-a-brief-comparison-4c4i
Create a folder on root call it 'static' which is bassically /static/imagename.png
Set the source to the image like so;
<img src="/static/imagename.png" />
This should load the static image in file both in dev environment and build file.
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..
I am using this tutorial to create a R markdown web page hosted on github: http://nickstrayer.me/RMarkdown_Sites_tutorial/
I created _site.yml, Index.Rmd, and build_site.R exactly as in the tutorial (copy/pasted). When I open index.html in a web browser from my local directory, index.html reflects the _site.yml style and appears as expected based on the tutorial (navigation bar at top, same as in the tutorial).
However, when I upload the index.html to github and view the page through the repository web page address as in the tutorial, the style is lost. There is no navigation bar, and the menu items just appear as text links.
I tried using multiple browsers, and the issue remained.
Result when index.html opened locally:
Result when same index.html opened via github repository web page:
repository: https://github.com/jjwill2/jasonwilliams
rendered site: https://jjwill2.github.io/jasonwilliams/
Your locally rendered site contains a directory site_libs. Files from this directory are used within the HTML pages, but you have not committed (or pushed) them to the git repository on Github. Once you commit these files and push them to github, the problem should go away.
A good debugging technique for these sort of issues are the developer tools build into modern browsers. The network view in FF gives the following upon loading your page:
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.