How to put a picture in HTML using CGI Perl?

Question

I am creating a very simple HTML form. I have included the form in the CGI file. I am using perl scripting. I have tried to include a picture in my form using the following CGI script:

print "<img src=picture1.jpg style=width:600px;height:300px;>";

The problem with this is that the picture in the form does not show, but I don't get any errors and everything else works fine when I access the form from a browser.

Screenshot of the problem

Answer 1

the picture in the form does not show, but I don't get any errors

You don't get any errors in the browser, but have you checked the web server error log?

You don't say where your CGI program and your image are both actually stored on your web server, so it's hard to be sure what the problem is, but I expect you're getting an error in the web server log which would clear things up.

If I had to guess (I don't, but I'm going to anyway!) I'd say that the problem is down to the location of the image. A common way to set up CGI programs on a web server is for a certain directory (often called cgi-bin) to be designated as a location to contain all of your CGI programs. But actually, what this means is that you are saying to your web server "everything in this directory is a CGI program - any time you get a request for a resource in this directory, you need to execute the program and return the results to the browser".

So the web server thinks that everything in that directory is a CGI program. This means that you can't put image files in this directory. Because if the web server gets a request for /cgi-bin/picture1.jpg, it will think that picture.jpg is program that returns the image - so it will try to execute the image file. And that's not goitn to work and you'll get a 500 error in your error log.

The code you have shown us is this:

print "<img src=picture1.jpg style=width:600px;height:300px;>";

Because you have src=picture1.jpg, the web server assumes that the image file is in the current directory - which will be the directory containing the CGI program. So there's a good chance that this is the problem I described above.

The other option is that you have configured your web server so that anything with a certain extension (often .cgi) should be seen as a CGI program. If that's the case, then my previous explanation isn't going to explain your problem. In that case, it's most likely that you've just got the URL of the image file wrong and you'll get a 404 error in the web server error log.

But in both cases, there will almost certainly be more useful information waiting for you in the web server error log. Please look there and add the details to your question.

Answer 2

From looking at your screenshot, I would guess that the image source or location specified as src='picture1.jpg' is incorrect.

Possible reasons can be:

• the file picture1.jpg does not exist on your server
• the file picture1.jpg is in a different directory

I bet it's the second problem. Your CGI script is most likely in a directory called like cgi-bin, so by using src='picture1.jpg' you look for the picture in this cgi-bin directory.

Are you really sure your picture is located here: cgi-bin/picture1.jpg? Most likely not.

I guess the picture is somewhere else, which means you have to set the correct path for it as shown in the examples below:

img src='../picture1.jpg'

This means "Go one directory level up and look for the picture1.jpg".

img src='../images/picture1.jpg'

This means: "Go one directory level up and look for the picture1.jpg inside the image directory".

img src='/html/images/picture1.jpg'

This means: "Go to the root directory of your website, find the html directory, then find the image directory and finally picture1.jpg inside.

After you adjusted the path according to your server's directory structure, the image should show up as desired. Furthermore, as mentioned in the other answers, you should always format your HTML attributes properly.

Answer 3

You need to use double quotes in the html.

print q{<img src="picture1.jpg" width="600" height="300">};

Answer 4

Make sure you are using the right format for the attributes

print "<img src='picture1.jpg' style='width:600px;height:300px;'>";