Loading image on Laravel localhost not working - html

When trying to load my image on laravel, the image is loaded in back-end fine. But not showing on the web page.
This is my code:
<figure class="c-card__image c-card__image--arrow c-searchresult__image"style="background-image: url('{{$image}}?{{\Carbon\Carbon::now()->timestamp}}')"></figure>
This is the code in browser:
<figure class="c-card__image c-card__image--arrow c-searchresult__image" style="background-image: url('/vendors/57/horse-11.png?1554287941')"></figure>
In my Console & Network tab (from browser) I can see the image is loaded correctly.. but it's not shown on screen..

In the code above you are not specifying any file type that may be the issue, it should be something like this horse-11.png?1554287941.png or horse-11?1554287941.png.Your $image var should only save the name, that way you can do something like this:
<figure class="c-card__image c-card__image--arrow c-searchresult__image"style="background-image: url('{{$image}}?{{\Carbon\Carbon::now()->timestamp}}'.'png')"></figure>
and the output will be something like this
<figure class="c-card__image c-card__image--arrow c-searchresult__image" style="background-image: url('/vendors/57/horse-11?1554287941.png')"></figure>

Related

images not showing on vscod Browser Preview

would appreciate some help here, my img html tag has the correct file path. However, when I launch the express server and try to view the image on vscod Browser Preview, I cannot see it (example picture in the link below). What could be the problem?
<div class="dashboard"><!--Dashboard START-->
<section class="navigation"><!--Navigation START-->
<img src="imgs/iHome.png" alt="">
</section><!--Navigation END-->
This is a picture of the html file along with the directories on the left and the html img tag in the middle, and the Browser Preview with the missing image on the right
The App needs a src folder that has a sub folder assets. your Frontend js should be hosted in the src folder.
put your image in the src -> assets -> images/pic01.jpeg
then call it like this:
<img src="assets/images/pic01.png" alt="">

Flask- How to fix img '404 picture not found' in 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.

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">

Can I display Image in alt attribute if an image fails to load

<img src="#" alt="Sorry the image could not be displayed.">
In the above code I want display an image in alt instead of text.In this way I want to display my site logo as image if it is unable to connect to internet.
Update:I am developing android application using Phonegap.
As stated in the comments - If your user doesn't have an internet connection, there's no way they can load a new image. However, if it's of any use to you and you wanted to load in placeholders for whatever reason.
You could do something like this with jQuery
I've set up a basic fiddle for you which is easy enough to understand.
Image With # Src
<img src="#" alt="no image" />
Variables to find # Src and to replace with placeholder
var noSrc = '#';
var noImg = 'http://placehold.it/400x500';
$('img[src="' + noSrc + '"]').attr('src', noImg);
Just change the path of the noImg variable to whatever your image path will be.
Working Example: Fiddle
<img src="#" alt="no image" />
$('img[src="#"]').attr('src', 'http://placehold.it/400x500');
Example without Variables: Fiddle 2

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" />