img src not showing picture : Forums : PythonAnywhere

img src not showing picture

My page: https://bbqbailey.pythonanywhere.com/ is not showing correctly - image is missing.

I see the picture if I do this from a computer that is logged into pythonanywhere.

I do not see it on any other computer!

So I'm expecting that some sort of permissions problem is going on, but the "ls -al" in console shows everything with 644 permission.

The text is displayed correctly, as is the 'alt' info, but the actual image isn't shown.

I put the image at: /home/mysite/learningFlask/SarahJustinEngaged.jpg, and I can see it as stated above, but no other computers can see it. If I use this in the "<img src" location, it doesn't work anywhere, logged in or not.

What am I missing????? Help! We're wanting to show this to family and friends now!!!

Here is my code :::python <!DOCTYPE html> <html> <body> <h1>Sarah and Justin are Engaged!</h1> <img src="https://www.pythonanywhere.com/user/bbqbailey/files/home/bbqbailey/mysite/learningFlask/SarahJustinEngaged.jpg" alt="Sarah and Justin are Engaged!" width="567" height="500"> </body> </html>

deleted-user-6013687 | 6 posts | Aug. 13, 2019, 1:37 p.m. | permalink

It doesn't work if you use the direct download link. Use static files instead.

deleted-user-5925968 | 20 posts | Aug. 13, 2019, 1:55 p.m. | permalink

On your web tab, you can put /static/ for the URL, /home/bbqbailey/mysite for the file path, set the img src to /static/learningFlask/SarahJustinEngaged.jpg, then reload web app

deleted-user-5925968 | 20 posts | Aug. 13, 2019, 2:04 p.m. | permalink

And my website is better than yours

dull | 758 posts | Aug. 13, 2019, 2:11 p.m. | permalink

johnobama: Thanks! That did the trick!

I had researched the 'static', but the following statement led me to believe use of 'static' was optional, not required:

"Our static files support is an optional extra. If you're happy letting your web framework serve static files for you, then that's fine. "

deleted-user-6013687 | 6 posts | Aug. 13, 2019, 2:22 p.m. | permalink

user dull: so what? lol

deleted-user-6013687 | 6 posts | Aug. 13, 2019, 2:29 p.m. | permalink

If you want your web framework to serve your static files, you usually need to configure it to do so. The docs for the framework will have the details of how to do that.

glenn | 9718 posts | PythonAnywhere staff | Aug. 13, 2019, 2:30 p.m. | permalink

Thanks Glen! Yes, found that out, and have corrected.

Note the documentation, which led me astray:

"Our static files support is an optional extra. If you're happy letting your web framework serve static files for you, then that's fine. "

deleted-user-6013687 | 6 posts | Aug. 13, 2019, 3:25 p.m. | permalink

If you use bootstrap, then you can make it as good as my site

dull | 758 posts | Aug. 14, 2019, 4:13 a.m. | permalink

Why edit button not woeking

dull | 758 posts | Aug. 14, 2019, 4:13 a.m. | permalink

@dull - the edit button works fine. Given your other issues with the forums discussed in the other thread, we'll have to assume it's also something to do with your environment or your usage.

glenn | 9718 posts | PythonAnywhere staff | Aug. 14, 2019, 11:32 a.m. | permalink

edit the post for me pls

dull | 758 posts | Aug. 14, 2019, 1:44 p.m. | permalink

Oh wait it actually does woek

dull | 758 posts | Aug. 14, 2019, 10:58 p.m. | permalink

OK, that's good to hear.

giles | 12063 posts | PythonAnywhere staff | Aug. 15, 2019, 11 a.m. | permalink

w o e k

dull | 758 posts | Aug. 15, 2019, 2:18 p.m. | permalink

Image not showing why

deleted-user-11383198 | 1 post | Sept. 1, 2021, 5:37 p.m. | permalink

Make sure that you're actually serving the image: https://help.pythonanywhere.com/pages/StaticFiles/

glenn | 9718 posts | PythonAnywhere staff | Sept. 1, 2021, 6:07 p.m. | permalink

My issue is like this, I have an image called 'flank.jpg' When I run the code for it which involves 'flank.jpg' then the html renders it as 'flank.JPG' .It does not show. So how do I solve this issue at hand. My actual cose in my template has '.jpg' and it is rendered to 'JPG' And it doesn't work.

Sibonile | 1 post | June 15, 2022, 5:21 p.m. | permalink

Nothing on PythonAnywhere changes the case of your links. See https://help.pythonanywhere.com/pages/DebuggingStaticFiles/

glenn | 9718 posts | PythonAnywhere staff | June 15, 2022, 5:46 p.m. | permalink

you have to add the url of the image which is inside the static folder then it will definitely gonna work.

mygptdataaccout | 1 post | June 20, 2023, 6:49 p.m. | permalink

I will also give my contribution to my colleagues:

To insert images, follow the steps below: 1st: within your project, create a folder called static (written exactly that way); 2nd: I enter this folder, and if you want, you can create other folders to place your files (e.g. images, js, css, etc.); 3rd: Your folder structure will be as follows: /home/user_name/site_name/static 4th: Now just reference the files you want within your templates. Ex.: <img src="/static/im_01.JPG" alt="test">

P.S.: pay attention to the file name extensions. In the last example, Pythonanywhere capitalized the file extension im_01. Follow the same nomenclature that appears.

I hope it is useful to you guys.

marcosdonizete | 1 post | Oct. 6, 2023, 5:57 p.m. | permalink