When I retreive server path and show into the p:graphicImage tag, then images are not displayed. Images are loaded into outside the webbapp folder. Server path of the images are like this \\qbsserver\Test Folder\test\car.jpg.
<p:graphicImage value="\\qbsserver\Test Folder\test\\#{image.imageName}" />
How can I make them to display? I am using PrimeFaces 3.0 and JSF 2.0 in Eclipse IDE.
You're making a conceptual mistake. It's not the server who includes and sends the image along with the generated HTML output somehow. It's the webbrowser who downloads the image by its URL as specified in the <img src> when it encounters an <img> tag in the HTML.
So it has really to be a normal URL, exactly the one as the enduser would enter in the webbrowser's address bar, not a server specific local disk file system path. The enduser using the webbrowser really doesn't have that image on exactly that path on its local disk file system.
Easiest would be to add the folder as a "virtual context" of the servletcontainer which you're using. It's unclear which one you're using. In Tomcat it's a matter of adding a new <Context> to the server.xml
<Context docBase="/path/to/images" path="/images" />
and in Glassfish it's a matter of adding an alternatedocroot to the glassfish-web.xml
<property name="alternatedocroot_1" value="from=/images/* dir=/path/to" />
Refer the documentation of the servletcontainer for details. Ultimately they should be accessible by a normal URL so that you can just use for example:
<p:graphicImage value="/images/#{image.imageName}" />
Other ways involve using PrimeFaces StreamedContent API or homegrowing a servlet.
See also:
Simplest way to serve static data from outside the application server in a Java web application
Related
I am working on a Spring boot application that is using ServletBeanRegistration to register a number of servlets that are being ported from a legacy application. One of the servlets registered for example with path /orders/* loads a velocity template that is on the classpath and returns the html output in the reponse.
This part works fine, but the returned html contains css and image links which the browser then makes http get requests for.
I have placed the css and images in the resources/static folder, but I just get a 404.
When I used to write static html many years ago, the paths would be relative, but given the document is served up from the classpath do you assume that the paths are as if the returned html is at the root or relative to the endpoint URL that is displayed in the browser when the returned html is loaded, eg /orders/path1?
I'm new to Blazor - so this may be obvious but I can't figure it out. I have a WebAssembly project and a separate Razor Class Library where I have some components. I have a component that I want an image in - I place the image in the wwwroot/img folder of the library and access as below
<img src="/img/logo.png" alt="test logo" />
But it will not display - I've tried
<img src="_content/img/logo.png" alt="test logo" />
But it won't display either.
The only way I can get my image to display is to put it into the wwwroot/img folder of the Client Project. But I want my component library to be able to be used in other projects.
Any guidance much appreciated. I'm coming from a Windows Forms background so I have a lot to learn :)
I´m also new to web development, but afaik the wwwroot folder serves as folder for static files your webpage uses (this is also the only folder the browser can access for media files for security reasons as I have understood it).
I had the same problem some days ago, I solved it by putting everything into the wwwroot folder, but I also found an article in which another way is suggested.
http://blog.vivensas.com/static-image-in-blazor-inside-and-outside-web-root/
There it is basically suggested to create a method in the Startup.cs file, which will be able to get your images from elsewhere:
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
app.UseStaticFiles();
app.UseStaticFiles( new StaticFileOptions
{
FileProvider = new PhysicalFileProvider(
Path. Combine(Directory . GetCurrentDirectory(), “StaticFilesFolder” )),
RequestPath = “/StaticFiles”
});
}
Then you can use your images like this:
#page “/”
<h3> Display Image in Blazor</h3>
<div>
<img src=”/StaticFiles/Image/OutsideWebRoot.png” />
</div>
#code {
}
Edit: Maybe I misunderstood your question, for this to work it also has to be in the client project. I don´t know the way to get images from other solutions than the client project.
I came across this problem as well in my Blazor Server application (.NET 6). I was using RCL in my blazor application and when I tried to save static assets in my RCL's /wwwroot/images and make use of them in that same RCL's component (to show an icon), I got a 404 when I utilized that in my Blazor app.
Here's how I did a little trick to get past this problem:
I stored all my static assets in my Blazor app (instead of RCL)
In my Blazor app's styleseet (site.css or any other), I created CSS variables for those assets, like:
--logo: url(/images/logo/logo-light.png);
and then in my RCL, I made use of them using a class selector and applied the content to that CSS variable created, like:
.icon:before {
content: var(--logo)
}
Worked like a charm.
2 years later, just in case... at least in .Net 5, 6,...
To fix the problem you need to set the source of the image tag to _content/YourRazorClassLibraryName/img/logo.png
Example:
<img src="_content/YourRazorClassLibraryName/img/logo.png" />
Important
If you do not reference the image from HTML, like in the example, the image will NOT get downloaded to _content/YourRazorClassLibraryName/img. So, at least one html element in your app needs to use the image, otherwise it will not get downloaded. Setting the background image of elements in CSS will also cause the image to get downloaded.
You can inspect this by:
running your app
pressing F12 in chrome\edge to launch developer tools
go to Sources tab
expand [site_url]/_content/[YourRazorClassLibrary]
check if img folder is there or the image that is not referenced in the HTML exists
I hava a Grails app and I want to make use of the Spring Security User Admin Screen. The screen can be accessed via the url
localhost:8080/user
Since I am not working with urls, but with templates (url always remains localhost:8080), but users can navigate via navbar und templates are loaded, I want to render the url localhost:8080/user into a template. I tried to render a template that contains
<frame src="localhost:8080/user">
but Grails didn't really like this.
What's the best way to do this?
You can try using an iframe instead of a frame.
I would also use the Grails createLink tag (see http://www.grails.org/doc/2.3.x/ref/Tags/createLink.html) to generate the src attribute value. This would ensure the src has the correct context root, port number, etc...
<iframe src="${createLink(controller: 'user', absolute: true)}" />
I'm unable to display image of external host on JSF page. In my case it is Apache file server. I'm creating image URL in #RequestScoped bean and then trying to pass it as String in #ViewScoped bean to frontend.
I've tried to display image in two ways:
First by loading it with JSF:
<h:graphicImage name="#{myViewScopedBean.myObject.mainImageUrl}" />
And then with html <img> tag as referenced in this answer.
Afterwards I've tried to print all attributes of myObject.
All String attributes are displayed well, except mainImageUrl. and I'm 100% sure that I'm setting mainImageUrl on backend.
What can provoke this problem? Is there any security JSF configuration?
The name attribute of <h:graphicImage> should represent a JSF resource name, not an URL. JSF resources are explained in among others How to reference CSS / JS / image resource in Facelets template? If you intend to specify a real URL, then you should be using value attribtue instead, or just plain HTML <img>.
So, either
<h:graphicImage value="#{myViewScopedBean.myObject.mainImageUrl}" />
Or
<img src="#{myViewScopedBean.myObject.mainImageUrl}" />
If that still doesn't work, then apparently the URL is plain wrong. Verify the generated HTML output and the browser's builtin HTTP traffic monitor (press F12). You should be able to open the image independently by copypasting exactly that URL straight into browser's address bar.
Should the welcome file mentioned in welcome file list tag always be physically present?
i.e. jsp, html etc. Or can it be a URL pattern?
I defined a welcome file list in the web.xml as:
<welcome-file-list>
<welcome-file>/home</welcome-file>
</welcome-file-list>
/home downloads a JSON file from the server to display on the browser. But whenever I start the application, it does not take me to the following page: http://localhost:8080/myapp/home. Instead it always goes to http://localhost:8080/myapp/ only. Please advise what am I doing wrong.
it does need to have a physical file on your webapp folder for a welcome file to be found even if some kind of controller will treat the request, for example, if you have a JSF app and the FacesServlet only handles requests of type *.faces on your app you should place an empty file called home.faces under your webapp folder, so it can be correctly mapped, on your case I guess the issue is slightly different, you want to fetch data from the server side and display it on the browser when user first lands on your app, so what you can do is actually:
Create an HTML called home.html as your welcome file with an empty div as a placeholder for your data.
Use a Javascript library or do an AJAX call to fetch the JSON from the server side
If the result call is OK, render the placeholder DIV with data fetched from server.