Display PNG from database using WideImage

Question

Using the WideImage extension, I am attempting to render an Image Blob from the database using this function:

protected function renderControlNonEditable()
    {
        assert('$this->model instanceof Item || $this->model->getModel() instanceof Item');
        $content = null;
        if ($this->model->files->count() > 0)
        {
            $content  .= '<ul class="attachments">';
            foreach ($this->model->files as $fileModel)
            {
                $filecontent = FileContent::getById($fileModel->id);
                $filecontent = $filecontent->content;
                $content .= '<li><span class="icon-attachment"></span>';
                $content .= FileModelDisplayUtil::renderDownloadLinkContentByRelationModelAndFileModel($this->model,
                                                                                                       $fileModel);
                $content .= ' ' . FileModelDisplayUtil::convertSizeToHumanReadableAndGet((int)$fileModel->size);
                $content .= '</li>';
                $content .= WideImage::load($filecontent);
            }
            $content .= '</ul>';
        }
        return $content;
    }

But when the $content is rendered it shows the following BLOB string instead of rendering the image.

�PNG  IHDRd$��8:IDATh�ݛy|Օ����

How can I ensure the proper headers are being issued? What can I do to fix this?

public function actionImage($model, $fileModel)
    {
         $filecontent = FileContent::getById($fileModel->id);
                $filecontent = $filecontent->content;
        $content = WideImage::load($filecontent);

        return $content;
    }

I know this but how/where? The WideImage extension should automatically detect and send the headers. — GO3DExpansion, Mar 13 '14 at 18:21
You can't just dump the raw bytes of an image into an html page. you need to load it separately via an `` tag. — Marc B, Mar 13 '14 at 18:21
@MarcB how would i go about that? i cant seem to get the syntax correct! please help! — GO3DExpansion, Mar 13 '14 at 18:23

score 1 · Accepted Answer · answered Mar 13 '14 at 21:18

1

Well, as other people mentioned you cannot dump the output of wideimage (or any image) on a html page. Your best solution (and only too I guess) is to create another function that handles just the image.

You should create the html just like you do now and instead of

$content .= FileModelDisplayUtil::renderDownloadLinkContentByRelationModelAndFileModel($this->model, $fileModel);

that I believe is getting the image content, have a

$content .= '<img src="'.$this->createUrl('image',array('file'=>$fileModel)).'">'

Your function (actionImage) should be in the same controller (in my example anyway) should get the blob, do whatever you want to do and then output the image (and only the image, no html).

answered Mar 13 '14 at 21:18

Mihai P.

9,307
3
38
49

awesome that seems like what i need i updated my questions with my actionImage function. I seem to be getting this URL `http://localhost/abe/app/index.php/image/file/%28None%29' . Im just getting the hang of all this so any example/explanation would be fantastic. – GO3DExpansion Mar 13 '14 at 21:56
$content = WideImage::load($filecontent); return $content; I am not sure if this is the way to output. I usually use WideImage::load('image1.png')->resize(100, 100)->output('gif');. The output function creates the correct headers etc. – Mihai P. Mar 13 '14 at 22:18
Yes, I've seen that exact syntax alot but I am loading my file from a database blob. – GO3DExpansion Mar 14 '14 at 01:53

Display PNG from database using WideImage

1 Answers1