Blueimp jQuery-File-Upload does not display thumbnail after image upload

Question

I downloaded the plugin latest version 9.12.1 here . I copied the downloaded files on my wamp server and accessed it from localhost / jQuery-File-Upload-9.12.1 / index.html.

After selecting an image file, a preview image is displayed before downloading. But as soon as the image is loaded, the thumbnail is not displayed.

However, in the Inspect Element, a link to the sketch is present in the src image.

The file is uploaded to the server folder and a thumbnail is created.

The name and size of the image are displayed.

What am I doing wrong?

Answer 1

Creating with dirty tricks ... loop until the image is ready before the preview image is displayed.
See jQuery: check if image exists . In my case, I use before the image tag as ...

while(urlExists(file.path) != 200) { console.log("still loading image"); } <img src="=file.path" width="100px"> 

The problem with writing the image is a bit belated than the response to the client. So, the 404 error for this image after rendering in html. But the image does exist when I checked. As above snippet, I am trying to wait for the image to load after successfully creating the file. I know this is not a good way, but it works. I believe that this error will not occur in production mode, and I'm trying to fix it working on the local host.

Answer 2

According to your question and comments, check two things:

Firstly, the downloaded thumbnail has the status of 200 or 404 in the network tab of the developer window. If its 200, the problem is something else.

If it's 404: Go to your .htaccess file for this content:

 RewriteEngine on RewriteCond %{HTTP_REFERER} !^$ RewriteCond %{HTTP_REFERER} !^http://(www\.)?yourdomain.com/.*$ [NC] RewriteRule \.(gif|jpg|css)$ - [F] 

The lines above say that Apache Web Server blocks all links to '.gif', '.jpg' and '.css' that do not belong to the domain name ' http://www.yourdomain.com/ '. Before downloading the .htaccess file, make sure that you replace "yourdomain.com" with the appropriate website address.

See if the URL in .htaccess is set correctly for your domain (i.e. localhost).

Link: http://www.htaccess-guide.com/hot-link-prevention-techniques/