Flask- How to fix img '404 picture not found' in html - html

I set up a server, am trying to load a picture on the web page, I get the alt tag to show up but the picture will not load. I have the picture in file structure '/templates/images/pic' . I have the src tag defined as '/images/pic' but it will still not load Is this an environment problem?
I have tried moving the picture into the folder with the html files and changing the src tag but still nothing
html
<img src="/mymodules/images/computer"
alt="HTML5 Icon"
name="pic"
style="width:128px;height:128px;">
python code for homepage
#app.route('/',methods=['POST','GET'])
def home() -> 'html':
return render_template('entry.html', page_title='Logica1 Err0r')
I have got the 404 error every time

I think I see your problem.
You need the WHOLE path of the image.
if you say the name of the image is pic, then your code should be
<img src="/mymodules/images/computer/templates/images/pic.jpg" alt="HTML5 Icon" style="width:128px;height:128px;>
Hope this helps! If it is still not working, I'll reformat my answer because the way you have your image path isn't that clear to me, but I'll figure it out.

Related

<img src> tag help - learning blazor

I am learning Blazor and at the moment I am trying to set an image as the background. I thought I would try display it first as the background-image css didnt work. I have attached a picture of my index.razor page and the img tag i am using is as follows:
<img src="file:///C:/Development/CsharpApplications/Portal/AlbertBartlettPortal/AlbertBartlettPortal/Pages/hero-range-1.jpg" alt="Background Image" />
It allows me to ctrl+click the file path and opens the image right away so it can see the image, but it wont display at all when the website is ran.
HELP!
Page Image Here
I put it in wwwroot\images and then used src="images/aaa.jg". No leading / OR ~/

I can't see the .png file as image but as background image it works

I'm making a Landing page and I want to put there some png images links but they don't show. When I set png as background image I saw it on the page but casual <img>doesnt work. Path of the file is okay, I'm sure of that, but console says "404 file not found".When I'm using exactly the same path as bg image it works perfectly I don't know why... I'm writing styles in SCSS and using components for different parts of the site if it matters.
Plz help I'm new T.T
here are the links
<div id='media'>
<a target='_blank' href="https://en.wikipedia.org/wiki/Facebook">
<img src="/src/images/facebook.png" alt="ikona facebooka">
</a>
<a target="_blank" href="https://pl.wikipedia.org/wiki/LinkedIn">
<img src="/src/images/linkedin.png" alt="ikona linkedin">
</a>
</div>
and structures of my folders looks like that:
./src:
../fonts
../images<--here are the png files
../js
../sass
../templates:
.../components
...index.html
./web:
../css
../images
..index.html
Your styles.css file is located in a different place than your template files so the path SHOULD be different.
From your stylesheet location
web/css/style.css -> ../../src/images/filename.png
From your template location
src/templates/index.html -> ../../web/images/filename.png
Here's what to do to troubleshoot file paths:
Open dev tools => network tab (select images in your case)
Look for the file in question
If it's 404ing your path could be bad.
Try to load your image in a new browser tab with the full URL path you THINK it should be. (make sure it's serving properly)
Then check that full/serving file URL against the URL in your code
Is this a WordPress site? If so make sure to output the full path with
<?php bloginfo('template_directory'); ?>/path/filename.jpg
Remove the '/' from the beginning of the image path.
So change this:
<img src="/src/images/facebook.png" alt="ikona facebooka">
To this:
<img src="src/images/facebook.png" alt="ikona facebooka">

image not displaying in webpage, but link to image works

Im building a webpage and have the following code in the page:
<img alt="chat" href="images/chat.jpg">Chat now
The image "chat.jpg" is in the images folder, which is in the same folder as index.html, and if i browse to "localhost/site/images/chat.jpg" it displays but it doesnt show up in the index page at "localhost/site/index.html".
I have tried changing the href to "/site/images/chat.jpg" and the same thing happens.
There is no href attribute for img elements. You are looking for the src attribute.
Validators are useful tools.
This will work for your problem.
<img alt="chat" src="images/chat.jpg">Chat now

Why is my logo not showing up?

I'm sure this is super easy but I'm a beginner. I have my code to pull up my logo but my logo just pulls up a broken image icon. See screencast
See screencast: http://screencast.com/t/ar8cpTIbMs
Here is my HTML:
<div id="logo">
<img src="C:\Users\Brent\Documents\Website Development"/>
</div>
I really only need my HTML figured out and I assume the CSS will work pretty well after that. Thanks for the help!
You must enter the correct file name for src. Such as
<img src="C:\path\to\your\file.jpg" />
http://www.w3schools.com/tags/tag_img.asp
Please note that it is not a good practice to use absolute paths in your src attribute.
In the other hand, you can use base64 encoded image data as src of your img tag. Something like
<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD...//Z" />
https://www.base64-image.de/tutorial
If you use this method, you dont need to keep your logo.jpg file anywhere.
Hope this will help.
You are linking to a directory in your img tag, instead of an image file. Also, I would suggest either practicing online in a free webhost or downloading a stack package like WAMP/MAMP/LAMP. You'll start running into problems where you can use http protocols pretty quickly in your studies. Though, that can get technical, so I say stick to a free webhost for now. You will get weird hang ups trying to use the file system that will ultimately confuse you while you are trying to learn.
The problem lies in your src for your <img>. You're linking it to a directory /Users/Brent/Documents/Website Development right now, when you should be linking it to the image. If your image is called logo.png, then you should link it with C:\Users\Brent\Documents\Website Development\logo.png. Also, instead of linking it to C:\Users\Brent\Documents\Website Development\logo.png, link it to the image based on where the file is. For example, if your file is in \Website Development\index.html, then all you need to put for the src is "logo.png".
You should move your logo to the same path as your website. Ex:
Website: C:/site/index.html
Logo: C:/site/logo.jpg
Then include the logo as:
<div id="logo">
<img src="logo.jpg">
</div>
Hint: You don't have to have the div for the logo to show up.
please enter the complete path including your image.
for example if your file name is mypic.jpg .Then
<img src="C:\Users\Brent\Documents\Website Development\mypic.jpg" />

How to give the desired path of an image?

I'm a newbie in ruby so please ignore my little mistakes ;)
Im trying to show an image in a View and everything works fine except the path of the image I gave to img's src attribute, I'm using Rails 4 and as a default web project tree in Rails my project has following directories
app
config
db
public
and some other…
my image is in "app\assets\images\file.jpg"
And i Have coded this line in my html file.
<img src="/app/assets/images/file.jpg" alt="image" />
But image doesn't load on the page!!!
When I check it in "firebug" I found the request of:
"http://localhost:3000/app/assets/images/file.jpg"
this request exactly means "public\app\assets\images\file.jpg"
and clearly is not my path! and even does not exist.
What should I code for src's value to make it!?
Try this:
<img src="<%= asset_path("file.jpg") %>" alt="image" />