Applet that contains image's won't show them when run in the browser

Question

Okay, my problem is the following: I have an applet that acts like an image gallery. It does work perfectly fine in eclipse, but when I add it to my web page and run it, the images won't show up, only the rest of the applet.

Does anyone have any idea how to solve?

This is how I add it in my HTML:

<applet code="Sliki.class" width="600" height="330">
    <param name="image" value="0.jpg">
    <param name="image" value="1.jpg">
    <param name.... (rest rest of the photos).....
</applet>

And here is my Java code:

import javax.swing.*;
import javax.swing.event.*;

import java.awt.*;
import java.util.*;
import java.io.*;

import javax.imageio.ImageIO;

public class Sliki extends JApplet implements ListSelectionListener {
 JFrame frmMain;
 JList lstBooks;
 JScrollPane scrollBooks;
 JLabel lblImage;
 ArrayList<String> books;
 Image image;

 public void init(){

     books = new ArrayList<String>();
     books.add("Razer Gaming PC - NZXT H440");
     books.add("Razer Gaming Laptop");
     books.add("Razer Mouse");

     books.add("iPhone 5s");
     books.add("Samsung Galaxy s4");
     books.add("iPhone 6s");

     books.add("The Alchemist");
     books.add("The Secret");
     books.add("The Power");

     books.add("Електрична гитара");
     books.add("Бас гитара");
     books.add("Флејта");

     books.add("21 Jump Street");
     books.add("Pineapple Express");
     books.add("Inception");

     books.add("No Limits");
     books.add("Nevermind");
     books.add("Speedfreak");

     books.add("Playstation 3");
     books.add("Starcraft 2");
     books.add("Warcraft 3");

     books.add("Superman");
     books.add("Spiderman");
     books.add("Batman");

     books.add("Dr. Martens");
     books.add("Nike Runners");
     books.add("Converse Sneakers");

     //frmMain = new JFrame();
     JPanel p1 = new JPanel(new GridLayout(0,2));
     //frmMain.setSize(600,330);
     //frmMain.setAlwaysOnTop(true);
     //frmMain.setLocationRelativeTo(null);
     //frmMain.setResizable(false);
     //frmMain.setLayout(new GridLayout());
     lstBooks = new JList(books.toArray());
     lstBooks.setSelectionMode(ListSelectionModel.SINGLE_SELECTION);
     lstBooks.addListSelectionListener(this);
     lstBooks.setVisibleRowCount(10);
     scrollBooks = new JScrollPane(lstBooks);
     p1.add(scrollBooks);
     //frmMain.getContentPane().add(scrollBooks);
     lblImage = new JLabel();
     p1.add(lblImage);
     add(p1, BorderLayout.CENTER);
     //frmMain.getContentPane().add(lblImage);
     //frmMain.setVisible(true);
    }



 public void valueChanged(ListSelectionEvent evt) {
     if (evt.getValueIsAdjusting() == false) {
     if (lstBooks.getSelectedIndex() != -1) {
     image = null;

     if(lstBooks.getSelectedIndex()==0)
         image = getImage(getCodeBase(), "0.jpg");
     else if(lstBooks.getSelectedIndex()==1)
         image = getImage(getCodeBase(), "1.jpg");
     else if(lstBooks.getSelectedIndex()==2)
         image = getImage(getCodeBase(), "2.jpg");

     else if(lstBooks.getSelectedIndex()==3)
         image = getImage(getCodeBase(), "3.jpg");
     else if(lstBooks.getSelectedIndex()==4)
         image = getImage(getCodeBase(), "4.jpg");
     else if(lstBooks.getSelectedIndex()==5)
         image = getImage(getCodeBase(), "5.jpg");

     else if(lstBooks.getSelectedIndex()==6)
         image = getImage(getCodeBase(), "6.jpg");
     else if(lstBooks.getSelectedIndex()==7)
         image = getImage(getCodeBase(), "7.jpg");
     else if(lstBooks.getSelectedIndex()==8)
         image = getImage(getCodeBase(), "8.jpg");

     else if(lstBooks.getSelectedIndex()==9)
         image = getImage(getCodeBase(), "9.jpg");
     else if(lstBooks.getSelectedIndex()==10)
         image = getImage(getCodeBase(), "10.jpg");
     else if(lstBooks.getSelectedIndex()==11)
         image = getImage(getCodeBase(), "11.jpg");

     else if(lstBooks.getSelectedIndex()==12)
         image = getImage(getCodeBase(), "12.jpg");
     else if(lstBooks.getSelectedIndex()==13)
         image = getImage(getCodeBase(), "13.jpg");
     else if(lstBooks.getSelectedIndex()==14)
         image = getImage(getCodeBase(), "14.jpg");

     else if(lstBooks.getSelectedIndex()==15)
         image = getImage(getCodeBase(), "15.jpg");
     else if(lstBooks.getSelectedIndex()==16)
         image = getImage(getCodeBase(), "16.jpg");
     else if(lstBooks.getSelectedIndex()==17)
         image = getImage(getCodeBase(), "17.jpg");

     else if(lstBooks.getSelectedIndex()==18)
         image = getImage(getCodeBase(), "18.jpg");
     else if(lstBooks.getSelectedIndex()==19)
         image = getImage(getCodeBase(), "19.jpg");
     else if(lstBooks.getSelectedIndex()==20)
         image = getImage(getCodeBase(), "20.jpg");

     else if(lstBooks.getSelectedIndex()==21)
         image = getImage(getCodeBase(), "21.jpg");
     else if(lstBooks.getSelectedIndex()==22)
         image = getImage(getCodeBase(), "22.jpg");
     else if(lstBooks.getSelectedIndex()==23)
         image = getImage(getCodeBase(), "23.jpg");

     else if(lstBooks.getSelectedIndex()==24)
         image = getImage(getCodeBase(), "24.jpg");
     else if(lstBooks.getSelectedIndex()==25)
         image = getImage(getCodeBase(), "25.jpg");
     else if(lstBooks.getSelectedIndex()==26)
         image = getImage(getCodeBase(), "26.jpg");
     image = image.getScaledInstance(297,298, Image.SCALE_SMOOTH);

     Icon ic = new ImageIcon(image);
     lblImage.setIcon(ic);

     }
     }
    }
    }

Answer 1

1. Make sure to add the images to your jar file.
2. Myself, I usually use ImageIO.read(URL url) or ImageIO.read(InputStream inputStream) to get my images in this type of situation.
3. Couldn't all those if/else blocks be simplified to one line? "" + lstBooks.getSelectedIndex() + ".jpg"?