Image Uploads Not Showing Up

[WTMike24]

For Bug Reports

• BookStack Version (Found in settings, Please don't put 'latest'): v0.20.0
• PHP Version: 7.0.25
• MySQL Version: Ver 14.14 Distrib 5.7.21

Expected Behavior

Image uploads and appears in the list of images

Current Behavior

Image uploads and reports 404 error

Steps to Reproduce

Attempt to upload an image

Problem in action: https://i.imgur.com/8R6fHyW.gif

Any Notes

This is a fresh install, all that was changed was the admin password, the color, and the APP_URL

Should probably edit to add the image files are there:

$ ls public/uploads/images/system/2018-02-Feb/ logo.png scaled-200-43 scaled-840-0 thumbs-150-150 $ ls public/uploads/images/system/2018-02-Feb/scaled-200-43/ logo.png $ ls public/uploads/images/system/2018-02-Feb/thumbs-150-150/ logo.png

[kammce]

I have the same issue and it can be pin pointed to the fact that bookstack uses the absolute domain url for the images and not a relative one. Due to this, if you change servers or your url changes at all, all the images break.

So the solution seems like simply changing the stored upload image paths in the database to relative to the root of the project rather than taking the fully qualified url.

[ssddanbrown]

Hi @WTMike24, Sorry to hear you're experiencing problems.

You say you've set the APP_URL. What have you set this to and what URL are you using to access the instance?

In addition, Can you provide any details on your webserver? Running Apache or Nginx or something else? What OS are you running?

I'm thinking this could be an issue with webserver configuration causing wrong image file locations to be checked.

[WTMike24]

Apologies for the delay replying to you, I have the APP_URL set to https://cookbook.crystalcloud.xyz, and this is the same URL I use to access the instance.

I am running on Ubuntu 16.04 Server with nginx as the web host. I am funneling the traffic through an nginx reverse proxy to split web traffic among multiple servers.

This all worked fine until I upgraded to v 0.20.0 (thought I borked an install so I decided to redo it completely), I still have an instance at 0.19.0 and everything works fine for that (though I access it via IP and not a domain)

If anything else would be useful in troubleshooting, please let me know so I can provide such information.

[WTMike24]

I don't know what changed, aside from trying to set up another demo instance to show here (which isn't working https://bookstack.crystalcloud.xyz), and redoing my nginx proxy (ran out of disk space), but it appears to be working now on both of my 0.20.0 instances.

Sorry to be a bother

[ssddanbrown]

@WTMike24 No worries at all, Happy to hear you got things working :+1:

[vdavid]

I have the same problem. The exact same thing happens as on @WTMlike24's animgif above. I run v0.21.0 on nginx on Amazon Linux, APP_URL is set to https://mysubdomain.domain.com.

Curiously, the file uploads properly and the link at the top-right of the "Image Select" dialog box points to https://mysubdomain.domain.com/uploads/images/system/2018-04-Apr/logo@128px.png which is the correct address (although the "04-Apr" is very strange as it's the 25th of April), and the image gets served correctly. But on the Settings page I get <img src="null" class="logo-image" alt="Image Preview"> for the logo.

[vdavid]

Also, might be unrelated, but I'm getting an "An error occurred uploading the image" error message if I try to copy-paste an image to any page. Both the public/uploads and the storage/uploads folders are writable for the web server. Laravel's debug console shows nothing noteworthy.

[Radiergummi]

@vdavid I've got the exact same thing, null images inside a link to the correct path :/ Have you solved this, by chance?

[vdavid]

@Radiergummi I posted my answer here too: https://github.com/BookStackApp/BookStack/issues/825 and got two really good ideas from Abijeet: "I see that image thumbnails are not generated properly. I would do two things:

1. Ensure php-gd extension is installed.
2. Run composer install again."

Eventually my company decided to stay with Google Docs rather than switching to BookStack so I never got to trying these options. But please, if you do, post the results here so that others will get help. Thanks!

[Radiergummi]

@vdavid thank you for the suggestions - I verified both, still no success. The URL being /null, I suppose this is a script error... @Abijeet, do you maybe have an idea?

[ssddanbrown]

Hi @Radiergummi, Can you confirm if this is only on the settings page for the app logo, Do other image uploads work okay such as page content uploads?

Please reply to me on issue #825 if that's okay as I think the original issue here is slightly different and is closed so your comments won't get as much visibility.

[totemcaf]

A problem that can happen is not enough memory for PHP ( memory_limit in php.ini). It seems that the image plugin fails silently to process the image or the application missed some exception.

[mmhubcn]

I made some changes to the image-manager.blade.php , and it worked! Science the vue.js don't suggest to use v-if and v-for together.

<div class="image-manager-list">
    <div v-show="images.length > 0">
        <div v-for="(image, idx) in images">
            <div class="image anim fadeIn" :style="{animationDelay: (idx > 26) ? '160ms' : ((idx * 25) + 'ms')}"
                :class="{selected: (image==selectedImage)}" @click="imageSelect(image)">
                <img :src="image.thumbs.gallery" :alt="image.title" :title="image.name">
                <div class="image-meta">
                    <span class="name" v-text="image.name"></span>
                    <span
                        class="date">{{ trans('components.image_uploaded', ['uploadedDate' => "{{getDate(image.created_at)}"."}"]) }}</span>
                </div>
            </div>
        </div>
    </div>
    <div class="load-more" v-show="hasMore" @click="fetchData">
        {{ trans('components.image_load_more') }}</div>
</div>

[coc]

I have the same problem that my uploaded images are not shown. I find out that they are shown if I access via lan ip but not if I access via wifi ip. A page containing an image shows the image as "?". If I display the element info of this, I can see

I have installed book stack on nginx on raspbian buster.

[ssddanbrown]

@coc BookStack does not currently support usage on two different domains. It sounds like you're accessing the system via two different IP's. The base domain is used in content, hence it'll likely try to load the image from the IP it was uploaded from.

[coc]

@ssddanbrown Thanks for this info. Where can I change the "base domain"? Must it be done in BookStack or nginx?

[coc]

The uploading of images work: public/uploads/images/gallery/2020-02/Test.png but the image is not shown in the image list or on a page.

[ghost]

I have the same issue. The image uploads - I have checked public/uploads/images/gallery folder also in the table (images). However the images don't show up so that they can be picked up.

I found even the thumbnails are getting generated properly (but no entries for thumbnails in the "images" table). Is that a clue?

Please note that this is related to page content upload. Others work fine (logo, shelves).

[sdenovan]

I was also running into this but was able to resolve the issue by logging in as an admin, then: Settings -> Maintenance tab -> Cleanup Images -> Run Cleanup

After confirming the deletion of some unreferenced images, the "All" and "Book" image select tabs started working again.

[ivanromeromendoza]

Hi, I recently change ip Server, bla bla bla ...and this works for me

Command:

php artisan bookstack:update-url https://ip-adress-OLD https://ip-adress-NEW

yo can try with out th S in HTTP en case of NOT SECURE thingy.

or

php artisan bookstack:update-url https://my-domain-OLD https://my-domain-NEW

Be sure to run "php artisan cache:clear" to clear any old URLs in the cache.

I hope it works for you too.

Peace

[ksmylmz]

here is my solution

add that key to your .env

STORAGE_TYPE=local_secure

[decimvs]

In my case, uploads worked OK. Files got uploaded to the file store correctly, but the image manager didn't shown anything (produced an 404 error over /images/gallery route). I noticed an error in the nginx rewrite rule. I fixed it using this one:

location / {
    try_files $uri $uri/ /index.php$is_args$args;
}

[skaneprime]

In my case, uploads worked OK. Files got uploaded to the file store correctly, but the image manager didn't shown anything (produced an 404 error over /images/gallery route). I noticed an error in the nginx rewrite rule. I fixed it using this one:

location / {
    try_files $uri $uri/ /index.php$is_args$args;
}

solved my case