Using local images in Google Earth - kml

Question

I have 100's of points that have a photo for each of the points that are stored on my local drive. Each point has extended data, which includes the root of the picture name (bee-tree)
I have my set up to reference using this line: img src="/files/$[geotourism_points/PIC_NAME].png", which works when I save it as a kml. However, when I save it as a .kmz it ignores the $[geotourism_points/ and only returns img src="files/PIC_NAME].png"
I have tried using relative path names using ../files/image.png, /files/image.png, files/image.png (which one do you use?!!)
I still can't get it to work. Can I insert images into my balloon this way (local files), or will I have to load these to a server and reference them using the URL?
Thanks in advance for your help!
Here is the whole code:
<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2" xmlns:gx="http://www.google.com/kml/ext/2.2" xmlns:kml="http://www.opengis.net/kml/2.2" xmlns:atom="http://www.w3.org/2005/Atom">
<Document>
<name>KmlFile</name>
<Schema name="geotourism_points" id="geotourism_points_schema">
<SimpleField type="string" name="MO_REGIO_1"><displayName><b>MO_REGIO_1</b></displayName>
</SimpleField>
<SimpleField type="string" name="TYPE"><displayName><b>TYPE</b></displayName>
</SimpleField>
<SimpleField type="string" name="NOTES_1"><displayName><b>NOTES_1</b></displayName>
</SimpleField>
<SimpleField type="string" name="WEBSITE"><displayName><b>WEBSITE</b></displayName>
</SimpleField>
<SimpleField type="string" name="SITE_NAME"><displayName><b>SITE_NAME</b></displayName>
</SimpleField>
<SimpleField type="string" name="LINK_2"><displayName><b>LINK_2</b></displayName>
</SimpleField>
<SimpleField type="string" name="ADDRESS"><displayName><b>ADDRESS</b></displayName>
</SimpleField>
<SimpleField type="string" name="PHONE"><displayName><b>PHONE</b></displayName>
</SimpleField>
<SimpleField type="string" name="PIC_NAME"><displayName><b>PIC_NAME</b></displayName>
</SimpleField>
<SimpleField type="string" name="SOURCE_1"><displayName><b>SOURCE_1</b></displayName>
</SimpleField>
<SimpleField type="int" name="NATUR"><displayName><b>NATUR</b></displayName>
</SimpleField>
<SimpleField type="int" name="CULTU"><displayName><b>CULTU</b></displayName>
</SimpleField>
<SimpleField type="int" name="REC"><displayName><b>REC</b></displayName>
</SimpleField>
<SimpleField type="int" name="ARCHEO"><displayName><b>ARCHEO</b></displayName>
</SimpleField>
<SimpleField type="int" name="HIST"><displayName><b>HIST</b></displayName>
</SimpleField>
<SimpleField type="double" name="OBJECTID"><displayName><b>OBJECTID</b></displayName>
</SimpleField>
</Schema>
<StyleMap id="pointStyleMap">
<Pair>
<key>normal</key>
<styleUrl>#normPointStyle</styleUrl>
</Pair>
<Pair>
<key>highlight</key>
<styleUrl>#normPointStyle0</styleUrl>
</Pair>
</StyleMap>
<Style id="normPointStyle0">
<IconStyle>
<Icon>
<href>http://maps.google.com/mapfiles/kml/shapes/placemark_circle.png</href>
</Icon>
</IconStyle>
<BalloonStyle>
<text><![CDATA[<table width="350" cellpadding="1" cellspacing="0">
<tr>
<td colspan="3" align="center" valign="top">
<table border="0" width="100%" cellpadding="1" cellspacing="0">
<tr>
<td align="left" valign="top">
<img src="files/lecl_logo.png" alt="logo"/>
</td>
<td width="70%"" align="left" valign="bottom">
<font color="#2f4f4f" size="+2"><strong>$[geotourism_points/SITE_NAME]</strong></font>
<br>
<font color="#999999"><em>$[geotourism_points/TYPE] </em></font>
<hr/>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="40%" align="left" valign="top">
<p>
<br>
<font color="#666666"><strong>Visitor's Information:</strong></font>
<br><br>
<font color="#999999">$[geotourism_points/ADDRESS]<br>$[geotourism_points/PHONE]</font>
</p>
<p>
<strong><em><font color="#2f4f4f">More Information...</font></strong></em>
</p>
</td>
<td align="left" valign="top">
<table border="0" cellspacing="0" cellpadding="3" bgcolor="white">
<tr>
<td align="center"><img src="files/$[geotourism_points/PIC_NAME].png" alt="picture" width="100%" align="left" valign="middle"/></td>
</tr>
<tr>
<td colspan="3" align="right"><font color="#999999" size="-1">$[geotourism_points/SOURCE_1]</font></td>
</tr>
</td>
</table>]]></text>
</BalloonStyle>
</Style>
<Style id="normPointStyle">
<IconStyle>
<Icon>
<href>http://maps.google.com/mapfiles/kml/shapes/placemark_circle.png</href>
</Icon>
</IconStyle>
<BalloonStyle>
<text><![CDATA[<table width="350" cellpadding="1" cellspacing="0">
<tr>
<td colspan="3" align="center" valign="top">
<table border="0" width="100%" cellpadding="1" cellspacing="0">
<tr>
<td align="left" valign="top">
<img src="files/lecl_logo.png" alt="logo"/>
</td>
<td width="70%"" align="left" valign="bottom">
<font color="#2f4f4f" size="+2"><strong>$[geotourism_points/SITE_NAME]</strong></font>
<br>
<font color="#999999"><em>$[geotourism_points/TYPE] </em></font>
<hr/>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="40%" align="left" valign="top">
<p>
<br>
<font color="#666666"><strong>Visitor's Information:</strong></font>
<br><br>
<font color="#999999">$[geotourism_points/ADDRESS]<br>$[geotourism_points/PHONE]</font>
</p>
<p>
<strong><em><font color="#2f4f4f">More Information...</font></strong></em>
</p>
</td>
<td align="left" valign="top">
<table border="0" cellspacing="0" cellpadding="3" bgcolor="white">
<tr>
<td align="center"><img src="files/$[geotourism_points/PIC_NAME].png" alt="picture" width="100%" align="left" valign="middle"/></td>
</tr>
<tr>
<td colspan="3" align="right"><font color="#999999" size="-1">$[geotourism_points/SOURCE_1]</font></td>
</tr>
</td>
</table>]]></text>
</BalloonStyle>
</Style>
<Folder id="layer 0">
<name>geotourism_points</name>
<open>1</open>
<Placemark>
<name>Bee Tree County Park</name>
<styleUrl>#pointStyleMap</styleUrl>
<ExtendedData>
<SchemaData schemaUrl="#geotourism_points_schema">
<SimpleData name="MO_REGIO_1">Confluence Region</SimpleData>
<SimpleData name="TYPE">City/County Park</SimpleData>
<SimpleData name="NOTES_1">riverfront</SimpleData>
<SimpleData name="WEBSITE">stlouisco.com/ParksandRecreation/ParkPages/BeeTree</SimpleData>
<SimpleData name="SITE_NAME">Bee Tree County Park</SimpleData>
<SimpleData name="LINK_2"></SimpleData>
<SimpleData name="ADDRESS">2701 Finestown Road Saint Louis, MO 63129</SimpleData>
<SimpleData name="PHONE"></SimpleData>
<SimpleData name="PIC_NAME">bee-tree</SimpleData>
<SimpleData name="SOURCE_1">stlouisco.com</SimpleData>
<SimpleData name="NATUR">1</SimpleData>
<SimpleData name="CULTU">0</SimpleData>
<SimpleData name="REC">1</SimpleData>
<SimpleData name="ARCHEO">0</SimpleData>
<SimpleData name="HIST">0</SimpleData>
<SimpleData name="OBJECTID">234</SimpleData>
</SchemaData>
</ExtendedData>
<Point>
<coordinates>-90.32844745921075,38.40766261103909,0</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Old St. Ferdinand Shrine</name>
<styleUrl>#pointStyleMap</styleUrl>
<ExtendedData>
<SchemaData schemaUrl="#geotourism_points_schema">
<SimpleData name="MO_REGIO_1">Confluence Region</SimpleData>
<SimpleData name="TYPE">Historic Site</SimpleData>
<SimpleData name="NOTES_1"></SimpleData>
<SimpleData name="WEBSITE">http://www.oldstferdinandshrine.com/</SimpleData>
<SimpleData name="SITE_NAME">Old St. Ferdinand Shrine</SimpleData>
<SimpleData name="LINK_2"></SimpleData>
<SimpleData name="ADDRESS">#1 rue St. Francois, Florissant MO 63031</SimpleData>
<SimpleData name="PHONE">Phone: [phone]</SimpleData>
<SimpleData name="PIC_NAME">old-st-ferdinand-shrine</SimpleData>
<SimpleData name="SOURCE_1">viewfrombackpew.blogspot.com</SimpleData>
<SimpleData name="NATUR">0</SimpleData>
<SimpleData name="CULTU">0</SimpleData>
<SimpleData name="REC">0</SimpleData>
<SimpleData name="ARCHEO">0</SimpleData>
<SimpleData name="HIST">1</SimpleData>
<SimpleData name="OBJECTID">269</SimpleData>
</SchemaData>
</ExtendedData>
<Point>
<coordinates>-90.33389390094645,38.79675526749391,0</coordinates>
</Point>
</Placemark>
</Folder>
</Document>
</kml>

Answer 1

Depends on your target audience. Do want to share KMZ on Internet or on an internal web site with photos on a shared network drive, etc?
If the KMZ file is local and relative to the KMZ file is the folder "files" with all your photos then it will display correctly in Google Earth as-is.
If you're serving the KMZ file from a website and the files are local then it won't work. The images must be co-resident with the KML file if using relative links.
<img src="files/$[geotourism_points/PIC_NAME].png" alt="picture" .../>
If you use absolute URLs in KML to the photo location then the KMZ will work where ever you host it.
<img src="http://server/files/$[geotourism_points/PIC_NAME].png" alt="picture" .../>
Alternative is embed the "files" folder and photos within the KMZ so the KML and photos are self-contained. Then you can use relative links in the KML.