Laravel image issue - html

im trying to make a profile view for my users, but having an issue when showing the profile photo, because i get the box such like its waiting for the foto but it doesn't shows it, here is the code:
#include('layouts.header')
#include('layouts.navbar')
<div class="media-body">
<a class="pull-left">
<img class="media-object" src="{{Auth::user()->avatar}}" alt = "Foto de perfil">
</a>
<h3>{{Auth::user()->name}}</h3><br>
<h5>Email: {{Auth::user()->email}}</h5>
<h5>Telefono: {{Auth::user()->phone}}</h5>
</div>
#include('layouts.footer')
i have the images saved in public/images/

You may try this (Assumed Auth::user()->avatar returns only the file name like - image.png):
<img
class="media-object"
src="{{asset('images') . '/' . Auth::user()->avatar }}"
alt = "Foto de perfil"
/>

Related

Why does my page actualize on the anchor?

When i clicked on this button that i created 1 it makes me go there 2 and that is what i want. But it's what comes after that that is the unwanted result.
When i actualized the page, it will makes me go there again, i can understand why since the url will not change there since it was " [...]index.html#nom " and it will become the same after actualizing the page after i clicked on the button. But when i do something else, like clicking on the button " Accueil " the url will be this [index.html] but it will not make me go at the start of the page but there 3 when i want to be there 4.
So my question is this. Why when i actualize my page without clicking the button or clicking " Accueil" or clicking "Accueil" or the other "Accueil" in the three others pages [à propos ; Tarifs ; Portfolio] that is supposed to make me go at the start of the page " [...]index.html " it will make me go to " Voir mon portfolio " (seen in image 3).
I tried to understand why it doesn't work. But if i understand correctly.
If i use a <a href"#nom"> TEST . When a id="nom" was created before. When i clicked on the " TEST " it will makes me go at the same page, but at the id where it was located in the page. So in my case it works. But when i clicked on other things that's supposed to make me go at the start of the " Accueil" page. it just makes me go at another location.
I tried to use another ID with another anchor just to make the " Accueil " of the page accueil; à propos ; tarifs ; portfolio makes me go to the same anchor located at the start of the page so it will works out. But again, the url will change and it will be this " [...]index.html#haut ". So there go another problem. If i just actualize my page without the #haut it will make go at the location of image4 and if have already clicked on the button ( seen in image 1) then i need to click on the " Accueil" at the top... to go at the top of the page. So it kinds of lost his meaning.
While doing what i'm doing will makes it work. It doesn't work on some cases :
1 : If i'm going to the index page the first time, the url will be " [...] index.html " so it will makes me go at the location of image4.
2 : If i'm clicking on the button seen in image1, the url will change to " [...] index.html#nom ", and if i actualize the page it will makes me go there again. So if i want to go at the start of my page i need to go at the start by scrolling and clicking on Accueil, but it's not that great (since i don't need to click on accueil since i'm already at the start of the page).
I tried looking on the internet, but it only gave me explanation of the anchor and id and it doesn't seem like i did something wrong here so i don't really know.
<body>
<header>
<nav>
<img src="logo.png" alt="Logo Robbie Lens" id="haut">
<div>
Accueil
À propos
Tarif
Portfolio
</div>
</nav>
</header>
<main>
<section class="accueil-introduction">
<div>
<h1>Robbie Lens Photographie</h1>
<p>
Où <em>professionalisme</em> s’allie avec <em>passion</em>. Depuis
plus de 5 ans maintenant, j’exerce mon métier avec la passion
qui m’anime : capturer l’essence de chaque instant.
</p>
UN PROJET ? ÉCRIVEZ-MOI
</div>
<img src="robbie-lens.png" alt="Portrait avec effet de la photographe Robbie Lens" >
</section>
<section class="accueil-photos">
<h2>Mon dernier projet</h2>
<div>
<img src="element-1.png" alt="Twelve apostles - Australie" >
<img src="element-2.png" alt="Wai-O-Tapu - Nouvelle-Zélande" >
<img src="element-3.png" alt="Parc National d’Abel Tasman - Nouvelle-Zélande" >
</div>
<div>
<img src="element-4.png" alt="Lac Rotorua - Nouvelle-Zélande" >
<img src="element-5.png" alt="Milford Sound - Nouvelle-Zélande" >
<img src="element-6.png" alt="Lac Wanaka - Nouvelle-Zélande" >
</div>
<div>
VOIR MON PORTFOLIO
</div>
</section>
<section>
<h2 class="tortue" >Parlons de votre projet</h2>
<form method="get" action="#">
<div class="form-nom-email">
<div class="form-column">
<label for="nom">nom</label>
<input type="text" name="nom" id="nom" required autofocus>
<label for="email">e-mail</label>
<input type="email" name="email" id="email" required >
</div>
<div class="form-column">
<label for="message">Votre message</label><br>
<textarea name="message" id="message" cols="40" rows="4"></textarea required>
<input type="submit" value="ENVOYER" class="cta">
</div>
</div>
</form>
</section>
</main>
<footer>
<img src="logo.png" alt="Logo Robbie Lens" >
<div>
<a target="_blank" href="https://twitter.com/" class="lien-icone">
<img src="twitter.png" alt="Logo Twitter" >
</a>
<a target="_blank" href="https://www.instagram.com/" class="lien-icone">
<img src="instagram.png" alt="Logo Instagram" >
</a>
</div>
</footer>
</body>
Thanks for your answer and if the question was already made and answered i'm sorry.
Have a nice day.

How to set absolute path for img attribute in html

sorry for this dummy question but i am having a trouble in my django and react app.
i have an endpoint which serves the image name but the image is saved in my local directory and in my react app i just want to append the file name like this
function Condition(props) {
let src = C:/Users/25191/Desktop/python_projects/doctorsolve/Drsove/media/media/images/HealthCondition/${props.meddata.image}
return (
<>
<div className="item">
<a href="#">
<img src={src} alt="medicine item image" />
<div className="desc">
<p className="medicinename">{props.meddata.title}</p>
</div>
</a>
</div>
</>
);
}
If the question is how to refer to a local file, then use the file URI:
file:///C:/Users/25191/Desktop/python_projects/doctorsolve/Drsove/media/media/images/HealthCondition/${props.meddata.image}
Try:
<img src="" alt="description">

Why does only one image from the two render?

With the following markup, I always get the same look as when for an image that isn't found: its alt and title still there but no pic.
<div class="def-orange">
<h3>Sign Up</h3>
<p>
Which kind of profile would you like?
</p>
</div>
<a href="#Url.Action("RegisterSenior", "Account", new RouteValueDictionary {{"userSide", "contractor" }})">
<img src="images/signup-contractor.png" alt="mans's head sillouheted with safety helmet" title="As a Senior">
</a>
<a href="#Url.Action("RegisterEmployer", "Account", new RouteValueDictionary {{"userSide", "employer" }})">
<img src="/Images/signup-employer.png" alt="mans's head sillouheted with collar and tie" title="As an Employer">
</a>
<div class="def-orange">
Already have an account? #Html.ActionLink("Sign In", "Login", "Account")
</div>
I know both images are present because I can swap them around, and both images display when they are on the right hand one of the two a tags, and neither displays when they are in the left hand a tag.
Change images/signup-contractor.png to /Images/signup-contractor.png

ng-src not displaying image

I'm currently having trouble to display my picture using ng-src.
<img ng-src="http://localhost:3000/images/{{image.image}}" class="img-circle" alt="User" style="width: 130px; height: auto;">
The data is there when I console log this
$scope.image = products.userinfo[products.index];
I didn't get any errors. Here is the sample output that I get.
enter image description here
Try this
<img ng-src="{{'http://localhost:3000/images/' + image.image}}">
It should be just image,
<img ng-src="http://localhost:3000/images/{{image.image}}"
and then ,
$scope.image = products.userinfo[products.index].image;

html image not appearing

I have the following line of code:
<IMG SRC= "Home.png">
I copied this directly from a different part of my code that worked. However, now the home image won't show up on my site. It says it prints it, but it's not visible. What's going on?
edit:
if(isset($_SESSION['userInfo']['username'])){
echo '<div class = "header"><IMG SRC= "Home.png" ALT="image">
<IMG SRC= "ViewProfile.png" ALT="image"> <IMG SRC= "ViewCart.png" ALT="image">';
echo '</div>';
else{
echo '<div class = "header">
<IMG SRC= "Home.png">
<IMG SRC= "FAQ.png"></div>';
}
You are missing the closing parenthesis } for the if statement. That might be the problem.
Try this...
if(isset($_SESSION['userInfo']['username'])){
echo '<div class = "header"><IMG SRC= "Home.png" ALT="image">
<IMG SRC= "ViewProfile.png" ALT="image"> <IMG SRC= "ViewCart.png" ALT="image">';
echo '</div>';
} else {
echo '<div class = "header">
<IMG SRC= "Home.png">
<IMG SRC= "FAQ.png"></div>';
}
Try
<div class="header">
<img src="Home.png"/>
<img src="FAQ.png"/>
</div>
Is it a broken image icon on the browser?
One thing might be that Home.png is in another directory. Did you copy this code from the same file or another file (possibly located in another directory)? If you copied this code from a file located in another directory you will need to format the image source link accordingly.
For example say you have a directory structure like so:
-index.htm (File)
-Home.png (File)
-js (Directory)
-css (Directory)
-pages (Directory)
---example.htm (File inside Pages directory)
If you then copied the code from your index.htm file to the example.htm located in your pages directory you would need to modify the link in the example.htm page like so:
<img src="../Home.png" />
Note the ".." which tells the browser to look in one directory up from where your html page is located.
be sure that the image and file in the same folder
and be sure that the name of image Home with H as capital letter