How do I load an image in the module I'm creating?

I am trying to load an image which is bundled with my module in a jsp page using an html img element like that:

<img src="${pageContext.request.contextPath}/moduleResources/drug_import/169849210007.jpg" />

But I always get a ‘could not load image’ error.

Trying to access the resource via url

http://localhost:8080/openmrs/moduleResources/drug_import/169849210007.jpg

yields a black screen with the following error:

the image ‘http://localhost:8080/openmrs/moduleResources/drug_import/169849210007.jpg’ cannot be displayed because it contains errors

I tried multiple images in png and jpg format, so it is unlikely these are all corrupted.

I also tried writing a servlet which converts the image into an output stream and calling the servlet in the src declaration of the img element. This also yields a ‘could not load image’ error. However, I am not sure whether I am mapping the servlet correctly. I tried mapping the servlet in the webModuleApplicatonContext.xml file like that (example from http://www.codeproject.com/Tips/259801/How-to-display-images-from-the-database-in-your-js):

<servlet>
    <servlet-name>GetImageServlet</servlet-name>
    <servlet-class>org.springframework.web.context.support.HttpRequestHandlerServlet</servlet-class>
</servlet>
<servlet-mapping>
    <servlet-name>GetImageServlet</servlet-name>
    <url-pattern>/image/*</url-pattern>
</servlet-mapping>

but it seems this does not work

Did you put the image under /omod/src/main/webapp/resources/drug_import/169849210007.jpg?

Please use any of our github.com/openmrs repositories to find examples of how to include an image.

1 Like

Creating a resources folder under webapp and putting the image there solved the problem. Thank you