in reply to photo does not display on HTML page in Linux

You can help us help you better by answering some of these quetions:

Have you investigated if the image is displayed properly without Perl?

Where exactly is the problem? Is the problem in creating the proper HTML from Perl or from serving the JPEG image from Perl? Is there a web server involved? What does its error log say?

What is the address of the HTML page? What is the address of the JPEG image?

  • Comment on Re: photo does not display on HTML page in Linux

Replies are listed 'Best First'.
Re^2: photo does not display on HTML page in Linux
by Anonymous Monk on Jun 01, 2017 at 16:28 UTC
    <IMG SRC="/net/home2/ceb/bmcclint/data/brendan.jpg" WIDTH=850 HEIGHT=1000>

    The HTML is OK on windows and is identical on Linux except the address is different (of course). No web server

[reply]
[d/l]

      This has very little to do with Perl and is all about HTML and how your browser displays local resources.

      Are you sure that your browser will interpret this address as an address that is supposed to be loaded from a file?

      Personally, I would either add an address relative to the HTML file, like (assuming that the HTML file lives in /net/home2/ceb/bmcclint):

      <IMG SRC="./data/brendan.jpg" WIDTH=850 HEIGHT=1000>

      [download]

      Alternatively, find out how your browser interprets file:// URIs, and give it the appropriate file:// URI. Maybe it is

      <IMG SRC="file://net/home2/ceb/bmcclint/data/brendan.jpg" WIDTH=850 HE
+IGHT=1000>

      [download]

      But again, none of this has anything to do with Perl, so most likely you will find better help in the documentation (or internet searches) for your browser.

[reply]
[d/l]
[select]
        
<!DOCTYPE html>

<html>
<head>
<title>Annotator Tool</title>

<style type="text/css">
.dropbtn {
    background-color: white;
    color: #4CAF50;
    color: whitr
    padding: 8px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropdown_0{
    position: absolute;
    top: 10px;
    right: 160px;
    display: inline-block;
}

.dropdown_1{
    position: absolute;
    top: 35px;
    right: 160px;
    display: inline-block;
}

.dropdown_2{
    position: absolute;
    top: 60px;
    right: 160px;
    display: inline-block;
}
.dropdown_3{
    position: absolute;
    top: 85px;
    right: 160px;
    display: inline-block;
}

.dropdown_4{
    position: absolute;
    top: 110px;
    right: 160px;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: white;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: white}

.dropdown_0:hover .dropdown-content {
    display: block;
}
.dropdown_0:hover .dropbtn {
    background-color: white;
}

.dropdown_1:hover .dropdown-content {
    display: block;
}
.dropdown_1:hover .dropbtn {
    background-color: white;
}

.dropdown_2:hover .dropdown-content {
    display: block;
}
.dropdown_2:hover .dropbtn {
    background-color: white;
}

.dropdown_3:hover .dropdown-content {
    display: block;
}
.dropdown_3:hover .dropbtn {
    background-color: white;
}

.dropdown_4:hover .dropdown-content {
    display: block;
}
.dropdown_4:hover .dropbtn {
    background-color: white;
}

#bottom {
    position: fixed;
    bottom:  0;
    left: 0;
    width: 100%;
    text-align: center;
    padding:  5px;
    border-top: 3px solid blue;
    background-color: #cccccc;
    padding-bottom: 2em;
    }
    
    
.tb5 {
    position: absolute;
    color: #4CAF50;
    top: 410px;
    font-size: 14pt;
    right: 80px;
    display: inline-block;
    height: 197px
    border-color: 3px #4CAF50;
    }    

.percent {
    position: absolute;
    color: #4CAF50;
    top: 140px;
    font-size: 14pt;
    right: 80px;
    display: inline-block;
    height: 197px
    border-color: 3px #4CAF50;
    }
    
input[type=submit] {
     position: absolute;
    top: 700px;
    right: 20px;
    border: 1px solid #f44c0e;
    color: #fff;
    background: tomato;
    padding: 10px 20px;
    border-radius: 3px;
}
input[type=submit]:hover {
    background: #f44c0e;
}


</style>
</head>

<body>

<IMG SRC="/net/home2/ceb/bmcclint/data/brendan.jpg" WIDTH=850 HEIGHT=1
+000>

<!-- 
<div style="position:     absolute;
            top:        13;
            right:         10px;
            width:        20px;
            height:        600px;
            border:1px solid #000;"
</div>
-->

<div class="dropdown_0">
    <button class="dropbtn" type="button">Assignment</button>
    <div class="dropdown-content">
    <FORM ACTION = "a.pl" METHOD = "get">
    <select name="assignment" >
            <option value="Cruise_1">cruise_1</option>
    <option value="Cruise_2">cruise_2</option>
    <option value="Cruise_3">cruise_3</option>

        <option selected="selected" value="cruise">Cruise 1</option>
    </select>
</div>
</div>

<div class="dropdown_1">
  <button class="dropbtn" type="button">Biotic</button>
  <div class="dropdown-content">
<select name="Biotic" >
    <!-- constructed options -->
    <br><br><label><input type="checkbox" name="biotic" value="Anemone
+_colonial">Anemone_colonial</label>
<br><label><input type="checkbox" name="biotic" value="Anemone_solitar
+y">Anemone_solitary</label>
<br><label><input type="checkbox" name="biotic" value="BlackSeaBass">B
+lackSeaBass</label>
<br><label><input type="checkbox" name="biotic" value="BlueCrab">BlueC
+rab</label>
<br><label><input type="checkbox" name="biotic" value="BrittleStar">Br
+ittleStar</label>
<br><label><input type="checkbox" name="biotic" value="Bryozoa">Bryozo
+a</label>
<br><label><input type="checkbox" name="biotic" value="Bryozoan">Bryoz
+oan</label>
<br><label><input type="checkbox" name="biotic" value="Clams">Clams</l
+abel>
<br><label><input type="checkbox" name="biotic" value="Crab_unident">C
+rab_unident</label>
<br><label><input type="checkbox" name="biotic" value="Ctenophores">Ct
+enophores</label>
<br><label><input type="checkbox" name="biotic" value="Dogfish">Dogfis
+h</label>
<br><label><input type="checkbox" name="biotic" value="Echinoderm">Ech
+inoderm</label>
<br><label><input type="checkbox" name="biotic" value="Eel">Eel</label
+>
<br><label><input type="checkbox" name="biotic" value="Fish_unident">F
+ish_unident</label>
<br><label><input type="checkbox" name="biotic" value="Flounder">Floun
+der</label>
<br><label><input type="checkbox" name="biotic" value="HermitCrab">Her
+mitCrab</label>
<br><label><input type="checkbox" name="biotic" value="Jellyfish">Jell
+yfish</label>
<br><label><input type="checkbox" name="biotic" value="JonahCrab">Jona
+hCrab</label>
<br><label><input type="checkbox" name="biotic" value="Lobster">Lobste
+r</label>
<br><label><input type="checkbox" name="biotic" value="Mussels">Mussel
+s</label>
<br><label><input type="checkbox" name="biotic" value="OceanPout">Ocea
+nPout</label>
<br><label><input type="checkbox" name="biotic" value="RockCrab">RockC
+rab</label>
<br><label><input type="checkbox" name="biotic" value="SandDollar">San
+dDollar</label>
<br><label><input type="checkbox" name="biotic" value="SeaRobin">SeaRo
+bin</label>
<br><label><input type="checkbox" name="biotic" value="SeaStar">SeaSta
+r</label>
<br><label><input type="checkbox" name="biotic" value="Skate">Skate</l
+abel>
<br><label><input type="checkbox" name="biotic" value="SkateEggCase">S
+kateEggCase</label>
<br><label><input type="checkbox" name="biotic" value="Sponge">Sponge<
+/label>
<br><label><input type="checkbox" name="biotic" value="Urchin_green">U
+rchin_green</label>
<br><label><input type="checkbox" name="biotic" value="Urchin_purple">
+Urchin_purple</label>
<br><label><input type="checkbox" name="biotic" value="WormHoles">Worm
+Holes</label>

    <option selected="selected" value="None"></option>
</select>
</div>
</div>

<div class="dropdown_2">
  <button class="dropbtn" type="button">Bottom Type</button>
  <div class="dropdown-content">
<select name="bottom_type" >
    <!-- constructed options -->
    <br><br><label><input type="checkbox" name="bottom_type" value="Bo
+ulder">Boulder</label>
<br><label><input type="checkbox" name="bottom_type" value="Cobble">Co
+bble</label>
<br><label><input type="checkbox" name="bottom_type" value="Gravel">Gr
+avel</label>
<br><label><input type="checkbox" name="bottom_type" value="Mudstone">
+Mudstone</label>
<br><label><input type="checkbox" name="bottom_type" value="Sand">Sand
+</label>
<br><label><input type="checkbox" name="bottom_type" value="ShellHash"
+>ShellHash</label>
<br><label><input type="checkbox" name="bottom_type" value="ShellHashC
+ourse">ShellHashCourse</label>
<br><label><input type="checkbox" name="bottom_type" value="ShellHashF
+ine">ShellHashFine</label>
<br><label><input type="checkbox" name="bottom_type" value="ShellHashM
+edium">ShellHashMedium</label>
<br><label><input type="checkbox" name="bottom_type" value="Silt">Silt
+</label>
<br><label><input type="checkbox" name="bottom_type" value="SiltySand"
+>SiltySand</label>

    <option selected="selected" value="Sand"></option>
</select>
</div>
</div>

<div class="dropdown_3">
  <button class="dropbtn" type="button">Sediment</button>
  <div class="dropdown-content">
<select name="sediment" >
    <!-- constructed options -->
    <br><br><label><input type="checkbox" name="sediment" value="coars
+e">coarse</label>
<br><label><input type="checkbox" name="sediment" value="fine">fine</l
+abel>
<br><label><input type="checkbox" name="sediment" value="medium">mediu
+m</label>
<br><label><input type="checkbox" name="sediment" value="none">none</l
+abel>

    <option selected="selected" value="None">None</option>
</select>
</div>
</div>

<div class="tb5">
    Notes:
    <input type="text" name="image_notes" value="."/>
</div>

<!--
<div class="percent 
 <label for="percent">Cobble Percent:&nbsp</label><input id="percent" 
+type="number" name="cobble_percent" min="5" max="100" step="10" value
+ ="5"/>
 <br>
 <label for="percent">Sand Percent&nbsp&nbsp&nbsp:&nbsp</label><input 
+id="percent" type="number" name="sand_percent" min="5" max="100" step
+="10" value ="5"/>
 <br>
 <label for="percent">Coarse Shells&nbsp&nbsp:&nbsp</label><input id="
+percent" type="number" name="coarse_shells_percent" min="5" max="100"
+ step="10" value ="5"/>
 </div>
-->
 
<input type="submit" value="Submit"/>

</form>


<div id="bottom">
<strong>--/net/home2/ceb/bmcclint/data/brendan.jpg-- Brendan at Sussex
+</strong>
</div>

</body>
</html>

        [download]
[reply]
[d/l]

In Section Seekers of Perl Wisdom