I am very new to using Dropwizard and the Freemarker template. I am trying to load the free marker template. However the images are not loaded in the page being displayed
i use the standard img tags of html to show the images
<img src="/media/images/mload.png" width="18" height="18" />
The images are available in the jar file.
Here is the structure of the project
src
|
- main
|
--resources
|
--media
|
---images
|
---mload.png
kindly let me know if am missing anything to display the image
From the official documentation:
AssetBundle provides a simple way to serve static assets from your service’s src/main/resources/assets directory as files available from /assets/* in your service.
You need to add the AssetBundle to your service with something like:
#Override
public void initialize(Bootstrap<HelloWorldConfiguration> bootstrap) {
bootstrap.setName("hello-world");
bootstrap.addBundle(new AssetsBundle());
}
Related
I am migrating an existing .NET Framework application to .NET 6. Parts of the application were UI components in library projects, which I have updated to be Razor Class Libraries.
I have updated the relevant projects based on these microsoft docs:
consume-a-razor-component-from-an-rcl
razor-pages/ui-class
However, I have found a situation where an image, which exists in the RCL project(s), was being loaded in-memory, and modified using the Graphics/Bitmap APIs. I am trying to discover how to accomplish this in the .NET 6 world. I have such static assets properly loading in Views and such at runtime, but I suppose I am wondering how to leverage that runtime lookup in library code (as opposed to in Razor view code).
For example, given an image path to a content file from an RCL project like:
~/_content/My.RCL.Project/Images/foo.png
I can reference such a file in an image tag, like:
<img src="~/_content/My.RCL.Project/Images/foo.png" />
And this works just fine as long as the path is correct - the image is loaded as expected. This is being done successfully for many images in the site thus far.
But how can I load that file into memory in server-side/library code, e.g.
const string filePath = "~/_content/My.RCL.Project/Images/foo.png";
using(var bitmap = new Bitmap(filePath))
using(var graphics = Graphics.FromImage(bitmap))
{
//... omitted
}
I have tried to find the physical file via the IWebHostEnvironment APIs:
IWebHostEnvironment env; //obtained via DI
env.WebRootFileProvider.GetFileInfo(filePath);
env.ContentRootFileProvider.GetFileInfo(filePath);
However, both of these methods return a non-existent file.
Does such a mechanism/API exist for RCL content? Can this be done by calling the Razor engine directly in some form?
I'm creating a React Native module along-side a React Native application. Everything with the module works as expected until I introduce images that should exist in the package and not in the application.
Any image from the package does not display in the consuming application.
(Option 1): Including image asset
const image = require('./assets/background.jpg');
const config = {
styleConfig: {
background: {
images: {
primary: image
},
...
}
export config;
If I include config in the consuming application, everything else works as expected (strings, components, etc) until I try to include <Image source={config.styleConfig.background.images.primary} /> (normally would get this info in a nicer format but for the sake of explanation showing the full path and not any of the abstractions). This does not throw an error but displays a blank image.
(Option 2): Including image component
Once it seemed like including the asset was not working, I created an Image component that used the required image directly and exported this. This also displayed a block the size of the image but did not show the asset. If I do this same operation but create the component and load the asset from the consuming application all is well.
I have a web project and I have uploadedImage inside the web folder of the project. I want to load an image which is inside uploadedImage folder. Im deploying the war file in Tomcat server. I coded as follows
Upload a new Image
</div>
</div>
<%
String fname = (String) request.getAttribute("name");
String pathImage = "C://bimla//Dev//java//OCRSystem//WebContent//uploadedImage//";
System.out.print("uploaded image"+fname);
session.setAttribute("filename", fname);
fname = fname + ".jpg";
System.out.println("with extension"+fname);
String path = "";
if (request.getAttribute("name") != null) {
path = request.getAttribute("name").toString();
}
%>
<div class="row">
<div id = "display" class="col-lg-8 center-block modal-content">
<img src="C:\\bimla\\Dev\\java\\OCRSystem\\WebContent\\uploadedImage\<%=fname%>" width="600" height="400"/>
</div>
</div>
But image is not displayed. When copy paste the path in the browser image displays correctly. Do you have any idea?
Your page is loaded through http (I assume). Nowadays luckily there is quite some boundary that websites (e.g. everything coming in through http) can't address your local filesystem (e.g. URLs starting with file:/// or C:/)
On a related note, don't build a web application that allows to upload files right into the webapplication's folder. This is bad for
security
backup
updates
redeployment
Rather upload to some other location and include a download servlet.
Side note: you might need duplicate \\ to escape backslashes in various cases (HTML has no such limitations though), but you definitely only need single / if you choose to use slash as the directory separator (this is not your problem though)
Quick Fix: You should load the image through http. Assuming that the image is in the same web application as your JSP, using <img src="<%=request.getContextPath()%>/uploadImages/<%=fname%>"> (or similar - you don't provide enough information for a definitive statement) will load the image through http. Note that this only quickfixes your current problem. The proper fix will be to upload the images to a folder (or database or storage) outside of your web application's directory - for the reasons given above.
As part of my application, I'm saving a dynamically generated list of png files in "/build/test-results/output/png/zpl-1.png". In the html page, I have used all the following:
<img src="/zpa/images/zpl-1.png" >
Works, but my saved images don't store in this location.
Path: <img src="/zpa/build/resources/main/static/images/zpl-1.png" >
Not loading (error 404)
Absolute path: <img src="file:///Users/sasi-kathimanda/STS/printing-agent/build/resources/main/static/images/zpl-1.png" >
Not loading.
My configuration:
server:
port: 8090
contextPath: /zpa
although i have tagged this question as "spring boot",probably i was missing it in the title may causes the confusion.
so here is how i solved it, the problem lies in configuring the static web resources in the spring boot config.
#Configuration
public class StaticResourceConfiguration extends WebMvcConfigurerAdapter {
#Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/pngFiles/**")
.addResourceLocations("file:ext-resources/")
.setCachePeriod(0);
}
and in my index.html using <img src="/zpa/pnFiles/zpl-1.png"> works.
Those paths are server file paths and would only work on the local machine (the machine that host the files).
You either need to move the upload directory to somewhere on the public side of the server (ie in the document root) and use a relative path
or
You will need a server side script that can fetch the images from a directory outside the document root and server them as an image.
You can use relative links (with no slash at the beginning) to make the image paths relative to the HTML file that you are including the images in. All three links that you showed are absolute paths.
Relative paths are helpful when you don't know where you are going to be serving the files from, such as when you're just viewing the HTML file instead of actually using a server.
For example, if your HTML file is in the zpa folder,
<img src="build/resources/main/static/images/zpl-1.png" >
**Outside server call image file using Spring Boot**
public class StaticResourceConfiguration extends WebMvcConfigurerAdapter{
#Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
String filePath = "E:/AshokParmar/Project/imges/";
registry.addResourceHandler("/img/qrcode/**")
.addResourceLocations("file:/"+filePath)
.setCachePeriod(0);
}
}
**in html file use below tags it works**
<img src="<c:url value="/img/qrcode/0012340012.png" />"/>
Dears,
I have followed the below steps to resolve the issue.
Steps:
1. My Apache Tomcat 9.0 server installed location is D:\apache-tomcat-9.0.8\apache-tomcat-9.0.8
2. I have created "images" folder under the "webapps" folder in Tomcat installed folder.
Hence my folder structure is "D:\apache-tomcat-9.0.8\apache-tomcat-9.0.8\webapps\images".
3. Then I have cleared my browser history and run the application. Now images are loading succesufully...
In my windows phone application, i'm using a webbrowser to render a HTML like this
private void webBrowserHTML_Loaded(object sender, RoutedEventArgs e)
{
WebBrowser web = sender as WebBrowser;
string description = web.DataContext.ToString();
web.NavigateToString(description);
}
My problem is i have html code that show an image in the variable description:
<img width=\"220\" class=\"logo\" alt=\"3950\" src=\"bandeau3950.png\" />
I put the image in the same folder with my code, but the image is not shown in the application.
Any solution please?
Solution 1
Use Base64 image uri format so that image is defined as part of html. You can use online conversion tools, like http://webcodertools.com/imagetobase64converter
Solution 2
Copy all required images to isolated storage folder. It can be done during app start up.
http://msdn.microsoft.com/en-us/library/ff431811%28VS.92%29.aspx
When html string is received save it to the same isolated storage as index.html
Do Navigate(new Uri("folder/index.html", UriKind.Relative))
In this case browser will be able to show images since your page and images in the same isolated storage folder.