html image not appearing - html

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

Related

how to make img link to a simple code (Html and Css)

so i want to make all my img links into a simple word/code in html and css
Example:
//Not like this
<img src="https://img1.com">
<img src="https://img2.com">
<img src="https://img3.com">
//I want to do something a little bit more like this instead
value01 = https://img1.com
value02 = https://img2.com
value03 = https://img3.com
<img src="value01">
<img src="value02">
<img src="value03">
I don't know what to do I am new to HTML and CSS
I think you can't do this in html because
The <img> tag is used to embed an image in an HTML page, maybe you can do this in python, instead, you can do this:
<b>
<img src="value1.jpg" alt="Value1" >
</b>
Source :
img tag html
there are two ways I can think of.
::THIS FIRST OPTION ONLY WORKS IF YOU SAVE THE PAGE IN (.PHP) EXTENSION
1° Method => You can create a php file apart, store the links of images in variables like this.
< ? php
$img = 'https : // upload . wikimedia . org /wikipedia/commons/thumb/c/c3/Python-logo-notext . svg/1200px-Python-logo-notext . svg . png';
? >
next, you can call this file in the main page/index.
< ? php
include ". /page/images . php";
? >
< html >
< img src="< ? php echo $img; ? >" alt="" srcset="">
< / html >
2° Method => you can just save the image to a folder easy to target.
create a folder inside the same folder you are accessing your main page.
for example: I created a folder called (img) in the same folder my index.html is found, save the image with a short name.
so to access that image i would call the image like this
< img src="image/img.png" alt="" srcset="">

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

how show image from strorage (Laravel ) in nuxtjs

I want to show all images that are in nuxtjs, i used the strorage (Laravel ) to save the files
<img v-for="(row, index) in files" :src="'storage/' + row" :key="index" alt="" width="150px" height="150px" class="img-fluid">
The link is as follows
http://localhost:3000/storage/example.jpg
but nothing show
I tested this before, Don't you think the problem could be from the controller?
public function index()
{
$files = scandir(storage_path('app/public/'));
$allFile = array_diff($files, ['.', '..', '.gitignore']);
return response()->json($allFile, 200);
}
The problem here is with the image path you need to specify where your image file exactly is, so you did most of its part like :src="'storage/' + row" but since your actual path to your image is something like http://localhost:8000/storage/example.jpg (the base URL of the Laravel app).
If both Laravel and Nuxt.js app serve under the same port and host
You need a leading slash in your src attribute to make an exact path.
<img v-for="(row, index) in files" :src="'/storage/' + row" :key="index" alt="" width="150px" height="150px" class="img-fluid">
If they are not serving on the same host and port
You have to declare an individual variable for your base URL, preferably in .env file and then refer to it and prepend it to your image src attribute.
So let's say we gonna define it in .env file, then it should be something like this:
//.env
BASE_URL=http://localhost:8000/
Then we will refer to it in our javascript data method (if that was not exists we will use default value as 'http://localhost:8000/').
data: function() {
return {
baseURL: process.env.BASE_URL || 'http://localhost:8000/ OR http://site.test/'
}
}
And in the last step we will prepend it to our image src attribute just like this:
<img v-for="(row, index) in files" :src="baseURL + 'storage/' + row" :key="index" alt="" width="150px" height="150px" class="img-fluid">

Add a link to a image

How do I add a link to the image? I am unsure what code to use.
<?php
$company_image = '';
$company_description = '';
if (!empty($options['company_photo'])){
$company_image = $options['company_photo'];
}
else {
$company_image = 'https://nemo-uploads-clone.s3.amazonaws.com/uploads/homeabout/image/1/philly.jpg';
}
you can't straightly add a link to the image variable which is defined,
but you can add the link like this:
in html you can use this:
<a href="https://www.something.com">
<img src="img.jpg">
</a>
in php, you can use "html tags" inside of ".php" file like this:
echo ' <img src="img.jpg"/> ';
the code above, will show an image on the screen that refers to wikipedia link!
The HTML for an image with a link
<a href="https://www.example.com">
<img src="https://www.example.com/img.png">
</a>

yii2 display image not found error

i've got a problem with displaying image I've just uploaded by imagine.
Now in my view file I have
<?= Html::img("#uploads/$file->hash/$file->hash-$typeThumbnail.$file->extension") ?>
which correctly displays in browser
<img src="/home/user/projects/project/_protected/runtime/uploads/1d30a595950237c599deb4fe02750489/1d30a595950237c599deb4fe02750489-2.jpg" alt="">
This file exists in this directory. Also I've made 777 permission to each folder and file in project folder but still I receive 404 not found error...
What am I doing wrong?
try use code, like this.
$img = yii\helpers\Url::to('#web/uploads/').$file->hash.'/'.$file->hash-$typeThumbnail.$file->extension;
$image = '<img src="'.$img.'" width="600" />';
<img src="<?= Yii::$app->request->baseUrl . '/backend/web/uploads/' . $file->hash.'/'.$file->hash-$typeThumbnail.$file->extension ?>" class=" img-responsive" >