CODEWITHSUNDEEP
javascripthtml
Dave Nguyen
Dave Nguyen

Reputation: 11

Can I redirect a page to an image so it'll work in an IMG tag?

Is there any way to have a page redirect to an image file in such a way that it'll work inside an image tag? A simple example would be something like

page1.html:

<html>
  <img src="page2.html">
</html>

page2.html

<html>
  <script> //redirect to dynamicallyChosenImage.png </script>
</html>

I need to be able to do this in pure HTML/Javascript if at all possible (my servers don't allow any server-side processing).

Upvotes: 1

Views: 1407

Answers (3)

Tim Penner
Tim Penner

Reputation: 3541

I need to be able to do this in pure HTML/JavaScript if at all possible (my servers don't allow any server-side processing).

This cannot be done in pure JavaScript/HTML on the client-side.

You need some form of server-side processing such as PHP or something else running on the server to do this.

In general, i think what you are trying to do will be confusing later on when you review your code. For example, you (or another developer reviewing the code) may think it was a typo and then want to change .html to something like .jpg or .png

With that said, what you are trying to do could be accomplished using the following ways:

Server-side processing (JavaScript)

A application can have custom HTTP Request Handlers. This approach would be pure JavaScript however it requires server-side processing.

Here is a JavaScript function that returns an image:

function doReturnImage(request, response) {
    var varImage = application.loadImage(application.getFolder().path+'WebFolder/'+'myPict.png');
    response.contentType = 'image/png';   
    return varImage;
}

Assuming the above function is defined in boot.js then here is the request handler calling the above function with addHttpRequestHandler:

addHttpRequestHandler("/page2.html", "boot.js" , "doReturnImage");

Server-side processing (Alternative)

A with the following code in the On Web Connection database method:

// On Web Connection
C_TEXT($1;$2;$3;$4;$5;$6)
C_TEXT($url_t)
$url_t:=$1
Case of 
  : ($url_t="/page2.html")
    // return an image for this html request
    $folder:=Get 4D folder(Database folder)
    WEB SEND FILE($folder+"bird.png")
End case

In the snippet of 4D code above, the request for /page2.html will result in the file bird.png being sent to the browser. This would allow you to use page2.html as the src of an img tag like this:

<img src="page2.html">

This approach requires server-side processing.

A similar question was asked here

Upvotes: 0

ChevCast
ChevCast

Reputation: 59213

This isn't possible. The request made by the browser to populate the img tag needs to have a response with image content. The HTML file is what comes back in that response and since that response doesn't contain a redirect header the browser will not make another request to anywhere. Since the page is trying to load into an img tag not even JS on the page will help you because that JS isn't even going to run since the HTML document isn't being parsed by the browser as an HTML document. It will just result in a broken image link.

If you have no control over the server so you can control the responses to requests made to it then you are out of luck in this particular scenario.

With that in mind, have you considered just using JavaScript on your page to conditionally load actual image URLs into the img tag based on whatever logic you need? What exactly is it that you're trying to do? Here's a plain JavaScript example of toggling the source of an img tag on button click:

http://codepen.io/anon/pen/PNzjxe

Upvotes: 2

user5135355
user5135355

Reputation:

I don't think so because of the src functionality.

The src attribute instructs the browser where on the server it should look for the image that’s to be presented to the user. This may be an image in the same directory, an image somewhere else on the same server, or an image stored on another server.

Upvotes: 0

Related Questions