Image from static resources is not displayed on the visualforce page?

Question

I am developing a website on Salesforce and I need to display products for each category with images. I have custom object Product__c with fields Name, Price__c, Quantity__c, Description__c, Image__c. I tried to display a list of product with name, price, image and description, but an image is no displayed. Only when I hard code each block for a product it is displayed, but I don`t want to do that. My images are stored in .zip archive in Static Resources (it is called Monitor). Any help is appreciated!

Here is my code snippet:

  <apex:page id="TestForMonitors" showHeader="false" controller="TestContoller">
<apex:form id="monitorsForm">
    <apex:outputPanel id="monitorsDetail">
        <apex:pageBlock title="Monitors" id="monitorsBlock">
            <apex:pageBlockTable value="{!monitorsList}" var="monitor">
                <apex:column >
                    <apex:commandLink value="{!monitor.Name}" >
                        <apex:param name="id" value="{!monitor.Id}"/>
                    </apex:commandLink>
                    <apex:pageBlockSection >
                        <apex:image value="{!URLFOR($Resource.Monitor, selectedImage )}" id="acerImage"/>
                    </apex:pageBlockSection>
                    <apex:pageBlockSection >
                        <apex:outputText value="{!monitor.Price__c}" id="acermPrice"/><br/>
                        <apex:outputText value="{!monitor.Name}"/>
                        <apex:outputText value="{!monitor.Description__c}"/>
                    </apex:pageBlockSection>
                </apex:column>
            </apex:pageBlockTable>
        </apex:pageBlock>
    </apex:outputPanel>
</apex:form>

And for controller:

 public with sharing class TestContoller {
   public Product__c productMonitor{set;get;}
   public boolean renderMonitor {set;get;}
   public List<Product__c> monitorsList {set;get;}
   public boolean renderMonitorsList {set;get;}

public TestContoller(){
    renderMonitorsList = true;
    monitorsList = selectMonitorsList();
}

    public static List<String> getImages() {
       List<String> imageOptions = new List<String>();
       imageOptions.add('acer.jpg');
       imageOptions.add('dell_u24.jpg');
       imageOptions.add('dell_s23.jpg');
       imageOptions.add('lg_22mp.jpg');
       imageOptions.add('lg_23mp.jpg');
       imageOptions.add('lg_27mp.jpg');
       imageOptions.add('philips.jpg');
       imageOptions.add('samsung_s22f.jpg');
       imageOptions.add('samsung_s24e.jpg');
       imageOptions.add('samsung_c24f.jpg');
       return imageOptions;
  }

public String selectedImage{
    get{
        if(selectedImage == null) {
            List<String> imageList = new List<String>();
            imageList.addAll(getImages());
            //selectedImage = imageList[0];
        }
        return selectedImage;
    }
    set{
        selectedImage = value;
    }
}

 public void displayBlock() {
    List<String> imagesList = new List<String>();
    imagesList.addAll(getImages());

    for (Product__c product : monitorsList) {
        if (product.Name == 'Monitor_Acer_S230HLBb') {
            selectedImage = imagesList[0];
        } else if (product.Name == 'Monitor_Dell_S2316H') {
            selectedImage = imagesList[1];
        } else if (product.Name == 'Monitor_Dell_UltraSharp_U2414H') {
            selectedImage = imagesList[2];
}

Answer 1

If the number of products is quite small, then you could reference a map in your Visualforce using the product name as the key:

value="{!URLFOR($Resource.Monitor, images[monitor.Name])}"

with the map setup in the controller like this:

public Map<String, String> images {
    get {
        if (images == null) {
            images = new Map<String, String>{
                    'Monitor_Acer_S230HLBb' => 'acer.jpg',
                    'Monitor_Dell_S2316H' => 'dell_u24.jpg',
                    ...
                    };
        }
        return images;
    }
    private set;
}