I'm trying to show an image inline on a page. It is being served by a codeigniter controller.
class Asset extends MY_Controller {
function index( $folder, $file ) {
$asset = "assets/$folder/$file";
if ( !file_exists( $asset ) ) {
show_404();
return;
}
switch ( $folder ) {
case 'css':
header('Content-type: text/css');
break;
case 'js':
header('Content-type: text/javascript');
break;
case 'images':
$ext = substr( $file, strrpos($file, '.') );
switch ( $ext ) {
case 'jpg':
$ext = 'jpeg';
break;
case 'svg':
$ext = 'svg+xml';
break;
}
header('Content-Disposition: inline');
header('Content-type: image/'.$ext);
}
readfile( $asset );
}
}
When I load a image in Chrome of FF its pops up the download window. I know when the browser can't display the content inline it will force a download anyway, but these are PNG and GIF images which display in the browser fine otherwise. In IE it doesn't force a download but it displays the image in ASCII.
If I comment out the entire image case it FF and Chrome both display the ASCII but not the image.
I thought setting the content type would allow FF and Chrome to show the actual image, and also allow the location to be used as an src.
The javascript and css shows fine of course.
Anyone got any ideas how I can make the images show properly?
Content-Disposition takes one of two values, `inline' and `attachment'. 'Inline' indicates that the entity should be immediately displayed to the user, whereas `attachment' means that the user should take additional action to view the entity.
In a regular HTTP response, the Content-Disposition response header is a header indicating if the content is expected to be displayed inline in the browser, that is, as a Web page or as part of a Web page, or as an attachment, that is downloaded and saved locally.
Inline is a software extension that works with Google Chrome® on your desktop, laptop, or Chromebook. Once you download it, it launches automatically when you open the Common App and is constantly active to support you while you complete the application — hence the name Inline.
Content-Disposition is an optional header field.
Try removing the Content-disposition header. By default, they should be displayed inline anyway.
Anyway, you should be doing something wrong. I've just tested in Opera and IE and they do indeed display the image inline with the content-disposition header. I used:
<?php
header('Content-Disposition: inline');
header('Content-type: image/png');
readfile('Untitled.png');
Use the dev tools of your browser to check the response header.
EDIT
Probably this bug is causing the problem:
<?php
echo substr( "file.ext", strrpos("file.ext", '.') );
gives ".ext" not "ext". Substitute for strrpos() + 1.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With