Question

I have a BasePage.java (together with a BasePage.html). My base page is basically a CSS menu made by mycssmenu.com (I’m not good with CSS). I want to add my university’s logo to the base page:

        <ul>
            <li><a href="MainPage.html"wicket:id="home">Home</a></li>
            <li><a href="LecturerPage.html"wicket:id="lect">Lecturer Page</a></li>
            <li><a href="StudentPage.html"wicket:id="stud">Student Page</a></li>
        </ul>
    </li>
    <li><span class="qmdivider qmdividery" ></span></li>
    <li><a class="qmparent" href="javascript:void(0)">About</a>
        <ul>
            <li><a href="About.html"wicket:id="about">About</a></li>
        </ul>
    </li>
    <li class="qmclear">&nbsp;</li>
</ul>
<script type="text/javascript">qm_create(0,false,0,500,false,false,false,false,false</script>
</div>
<div id= "body">
    <img src="C:\Users\Eliezer Shindler\Desktop\cityunilogo.jpg"alt="City Logo"/>
    <wicket:child />

In short, the City logo gets displayed when I open the page in a web browser, but not when running Wicket. Why, and how can I make it work with Wicket? I’m quite new to Wicket.

Answer 1

You’re referencing a local drive path (C:\...), which: a) will not work outside your machine; b) even if it worked, the browser won’t show it, due security restrictions (will only open local files if the original page is also loaded from disk).

Don’t, ever, use local machine paths in a web application. Just don’t, it’s evil, and your descendants will be cursed for 7 generations.

If you want an image to be displayed in your web application, move it into a folder inside your application context, or in the classpath, and make your page point there.

Suppose your project layout is like this:

myapp/
    src/
        myapp/
            MyApplication.java
            MyPage.java
            MyPage.html
    web/
        WEB-INF/
            web.xml

You could create a myapp/web/images folder, and copy your image (say, logo.png) into it:

myapp/
    src/
        myapp/
            MyApplication.java
            MyPage.java
            MyPage.html
    web/
        images/
            logo.png
        WEB-INF/
            web.xml

In MyPage.html, the markup would be something like this:

<img src="images/logo.png">

Another approach is to add your images from Java code, keeping your images/resources side-by-side with your .java files:

myapp/
    src/
        myapp/
            images/
                logo.png
            MyApplication.java
            MyPage.java
            MyPage.html
    web/
        WEB-INF/
            web.xml

Then, the declaration in MyPage.html would be

<img wicket:id="logo">

And MyPage.java would contain

add(new Image("logo", new PackageResourceReference(HomePage.class, "images/logo.png")));

meaning that the logo.png file is in a ‘images’ folder, relative to the HomePage class’ package.

A similar approach (using header contributions instead of Image) can be used for CSS and javascript files.

This is a lot more verbose, but can be very useful, especially if you modularize the reusable components into a library, since you can then bundle all resources (images, css and javascript files, etc.) into one jar.