Issues using images.

So you're a Noob? Post your questions here until you graduate! Don't be shy.
 Reply

User avatar

Re: Issues using images.

By QuickFix
- Wed Jan 16, 2019 3:44 am #80088
Good Science For You wrote:If you have anyone you know with a website that you can upload the photos to, would allow larger images.

That won't work since a client can't access any other network than the ESP at the time when getting the page from the captive portal. :idea:

Possible reasons why it doesn't work:
  • Image too large: make it smaller
  • Image of wrong type: make sure it actually is in the format the extension reflects
  • Image not accessible: put it in SPIFFS and try (as a test) to retrieve it separately by invoking the URL of the image directly
  • Link to image in HTML-page is incorrect: make sure the link is relative
  • Too many open connections: an ESP can only handle 5 connections at any given time (remember that each file, including the HTML itself, referenced inside a page counts as 1 connection)
  • The code is blocked serving other files (your image) while the HTML-page is sent (and parsed by the client)
User avatar

Re: Issues using images.

By pablopablo
- Wed Jan 16, 2019 10:04 am #80092
Good Science For You wrote:
pablopablo wrote:Just giving this a bump but also to say that to say that

I have been reading A-Beginner's-Guide-to-the-ESP8266 http://www.esploradores.com/wp-content/ ... 8266-1.pdf

On Page 34 it states (Only use small files like text files or icons. There's not enough space for large photos or videos.)

I wonder now if this is the issue? The jpegs/png I have tried have all been under 1mb.


Because I have a website and can use that for images, all one needs is to publish the reference address of the images. If you have anyone you know with a website that you can upload the photos to, would allow larger images. Actually any size that will fit on a web page and as many as you want. You should limit them to 70% of "perfect" image to keep them smaller for faster loading. As a matter of fact all images load VERY fast this way.

Also, I found that using single lines of html code and sending that for each image allows a lot of manipulation of the images on the screen. Position by coding them.

If you want. I can upload them to one of my websites. And then you can address them in your code. Also there are places where you can get a really cheap website service.


Thanks for your reply and your offer. However, for my project i would like it to be completely offline.
User avatar

Re: Issues using images.

By pablopablo
- Wed Jan 16, 2019 12:04 pm #80094 Hey QuickFix,

Thanks for the reply. To 'answer' your reasons:

- Image too large: make it smaller

Current image is 93kb. I've tried larger ones but no luck...however, I did try a 9kb logo and it did. However, I would hope to have images that are around 6-700 kbs....I though these would be ok as my understanding was SPIFFY allowed for 3 mbs?

- Image of wrong type: make sure it actually is in the format the extension reflects

nope, in data folder current file is .jpg as is it html (more on that later)

- Image not accessible: put it in SPIFFS and try (as a test) to retrieve it separately by invoking the URL of the image directly

Not sure what you mean here, however when I have it in data file and open it in browser it works no problem.

- Link to image in HTML-page is incorrect: make sure the link is relative

I think I have this correct in hte html file (which is also in data folder) I have

Code: Select all<img src="image.jpg" width="600" height="600"> 


I have also tried this
Code: Select all<img src="/Users/Me/Desktop/wifi/data/image.jpg" width="600" height="600"> 


But it does not work either.

- Too many open connections: an ESP can only handle 5 connections at any given time (remember that each file, including the HTML itself, referenced inside a page counts as 1 connection)

Ok, this one is new to me. My arduino sketch folder consists of:

wifi.ino
data/

Data folder consists of:

index.htm.gmz
connect.htm.gmx
image.jpg
pure.css.gz


-The code is blocked serving other files (your image) while the HTML-page is sent (and parsed by the client)

Not sure about this but if so is there a workaround? for clarity here is my html file

Code: Select all<!DOCTYPE html>
<title>Test</title>
<meta name="viewport" content="initial-scale=1.0">
<link rel="stylesheet" href="pure.css">

<html>
<body>

<h1>IMAGE TEST</h1>
     <img src="image.jpg" width="600" height="600">
 
 
   </body>
   </html>


Any thoughts, suggestions greatly aprreciated!
User avatar

Re: Issues using images.

By rudy
- Wed Jan 16, 2019 12:46 pm #80096 Confirm that the file name is exactly the same. I had a problem quite a while ago with loading images. The problem was that I was calling for image.jpg but I had image.JPG as the file. I think that case was not supposed to matter, but it did at the time.

As far as size, I have done tests with ~700K sized images without problem.

As has been stated, if you have more than 4-5 files to serve, things can get funky. (does not seem to be your problem) Code to have the browser not send additional requests, until the current ones are in, is what I planned to do to compensate for this.
 Reply
Return to Newbie Corner