I want to know How to add image in laravel.
I also know it can do using html/css. But I want to know how to give image path and where put images in laravel(I suppose public img folder in laravel).
Please help me.
Thanks in advance.
<img src="(How to give image path??)" alt="" style="width:100%;">
You need to store your images in the public folder and then you can access them like this
{{ asset('/my-picture.png') }}
You can also access them using Laravel Collective package for building forms and HTML elements, so your code will look like this:
{{ HTML::image('/my-picture.png', 'about the picture') }}
I solved my problem as following:
<img src="img/pictureName.jpg" alt="">
img is folder in public.I only give path in image simply.
Thanks all.
The storage_path() is OS file system path. For example in Windows it will be C:\project\storage or *nix /var/www/project/storage.
The <img> can't read the OS path. They read URL, something like http://domain/image.png.
For example to read images inside storage_path, add this inside routes/web.php.
Route::get('storage/{name}', function ($name) {
$path = storage_path($name);
$mime = \File::mimeType($path);
header('Content-type: ' . $mime);
return readfile($path);
})->where('name', '(.*)');
Usage
<img src="{{ get_image('storage/images/logo.png') }}" />
<img src="{{ get_image('storage/images/other.jpg') }}" />
<img src="{{url('folder_name/file_name_variable')}}" alt="" style="width:100%;">
{{url('folder_name/file_name_variable')}}<br>
try this
Related
I want to use an external link as an image in img tag in HTML in flask.
I know how to do it by keeping the images in static folder but my case is different.
I want to do something like below code in index.html:
<body>
<h1>external image</h1>
<img src={{url_for('static',filename='https://unsplash.com/photos/uUVkzxDR1D0')}}
alt="No image">
</body>
My Flask looks like this:
from flask import Flask,render_template
app=Flask(__name__,static_url_path='',static_folder='static',template_folder='templates')
#app.route("/")
def index():
return render_template("index.html")
I tried removing the static endpoint from the url_for function as it does not makes sense to search for an external image link into static folder, but then I got the error that url_for requires an endpoint.So, I don't know how to put the image link.
Everything is just working fine. Only the image is not getting
rendered and I am getting the alt text, i.e., 'No Image' on screen.
Any help would be greatly appreciated. Thanks in advance for the help.
Why not simply:
<img src='https://unsplash.com/photos/uUVkzxDR1D0'
alt="No image">
Of course this hotlinks that image from the remote server within your page, which some hosts may disable for their images.
Within your flask app:
def index():
...
img_url = "http://cooldomain.rofl/image.png"
return render_template("index.html", img_url=img_url)
In your template index.html:
<html>
<img src="{{ img_url }}" alt="This is an image">
</html>
This way you don't need to hard code a URL into a template.
I want to display an image in my dossier.index page (blade). I've already defined an image with the following path:
/resources/assets/icons/step_1.png
What would be the correct syntax to get my image displayed in my view?
I've already tried something like this:
<img src="/resources/assets/icons/step_1.png">
Or with blade:
<img src="{{ URL::to('/resources/assets/icons/step_1.png') }}">
Use asset() helper:
<img src="{{ asset('icons/step_1.png') }}">
Also, public assets should be in public directory.
URL::to is generate absolute url to the given path and URL::asset is generate to an application asset. So use below code to display image.
<img src="{{ asset('icons/step_1.png') }}">
See the basic of laravel helpers
First, move /resources/assets/icons/step_1.png to storage/app/public/assets/icons/step_1.png as "Storage" directory should be used to store such publicly accessible files as per the Laravel's offical docuemtnation:
https://laravel.com/docs/5.3/filesystem#the-public-disk
Then fire below artisan command:
php artisan storage:link
Then
<img src="{{ asset('storage/assets/icons/step_1.png') }}">
This is the proper way to use such assets in Laravel.
Now, it should work.
I am currently doing an assignment for school and my teacher has sent all the project photos which I have saved. The only problem is they will not show up no matter what I try doing.
ex. the image is named "photo1.jpg" and I did:
<img src="photo1.jpg">
But the image will not load. if anyone has any suggestions I'd appreciate it.
If you mean on a webpage then the use this code to generate the image:
<img src="photo1.jpg"/>
Keep in mind that the photo1.jpg needs to be in the same directory as the file (webpage) calling it.
Check the location of the image. It should be in the same folder
<img src = "photo1.jpg" />
if it is not, and it has its own image folder inside your project you can do it like this
<img src = "imagesFolder/photo1.jpg" />
<img src="photo1.jpg"></img>
Don't forget that this links current page folder. If you have in eg. in images directory, then use
<img src="images/photo1.jpg"></img>
<body style="background-color: paleturquoise">
<h2 style="color: red">Duke's soccer League: Home Page<br/></h2>
<ul style="list-style-type: circle">
<li style="font-size: larger">All Leagues list</li>
<li style="font-size: larger">Register for a League (TBA)<br/><br/></li>
</ul>
<h2 style="color: red">League Administrator</h2>
<ul style="list-style-type: square">
<li style="font-size: larger">Add a new League (TBA)</li>
<img src="C:\Users\VIRK\Desktop\66.jpg" width="400" height="400" ></img>
</ul>
</body>
I am currently practice with JSP and I try this html code to make a web page on NetBeans IDE 7.0 but when I'm build and run the page no error in code but the image is not showing in the browser.
Edited:
Here I have given the screenshot of the NetBeans IDE where you can see the image is existing in Web-INF folder and the index.jsp page too and I tried with "/" before the image name but it won't work. The exact path of my project is C:\Users\VIRK\Documents\NetBeansProjects\practiceJSP .
<img src="/66.jpg" width="400" height="400" ></img>
I find out the way how to set the image path just remove the "/" before the destination folder as "images/66.jpg" not "/images/66.jpg" And its working fine for me.
You put inside img tag physical path you your image. Instead of that you should put virtual path (according to root of web application) to your image. This value depends on location of your image and your html page.
for example if you have:
/yourDir
-page.html
-66.jpg
in your page.html it should be something like that:
<img src="66.jpg" width="400" height="400" ></img>
second scenario:
/images
-66.jpg
/html
page.html
So your img should look like:
<img src="../images/66.jpg" width="400" height="400" ></img>
Your path should be like this : "http://websitedomain//folderpath/66.jpg">
<img src="http://websitedomain/folderpath/66.jpg" width="400" height="400" ></img>
I don't know where you're running the site from on your computer, but you have an absolute file path to your C drive: C:\Users\VIRK\Desktop\66.jpg
Try this instead:
<img src="[PATH_RELATIVE_TO_ROOT]/66.jpg" width="400" height="400" />
UPDATE:
I don't know what your $PROJECTHOME is set to. But say for example your site files are located at C:\Users\VIRK\MyWebsite. And let's say your images are in an 'images' folder within your main site, like so: C:\Users\VIRK\MyWebsite\images.
Then in your HTML you can simply reference the image within the images folder relative to the site, like so:
<img src="images/66.jpg" width="400" height="400" />
Or, assuming you're hosting at the root of localhost and not within another virtual directory, you can do this (note the slash in the beginning):
<img src="/images/66.jpg" width="400" height="400" />
all you need to do is right click on the jsp page in the browser, which might look like "localhost:8080/images.jpg, copy this and paste it where the image is getting generated
I had same kind of problem in Netbeans.
I updated the image location in the project and when I executed the jsp file, the image was not loaded in the page.
Then I clean and Built the project in Netbeans. Then it worked fine.
Though you need to check the image actually exists or not using the image URL in the browser.
I had a problem where the images would not show and it wasn't the relative path. I even hard coded the actual path and the image still did not show. I had changed my webserver to run on port 8080 and neither
<img src="c:/public/images/<?php echo $image->filename; ?>" width="100" />
<img src="c:/public/images/mypic.jpg" width="100" />
would not work.
<img src="../../images/<?php echo $photo->filename; ?>" width="100" />
Did not work either. This did work :
<img src="http://localhost:8080/public/images/<?php echo $image->filename; ?>" width="100" />
do not place *jsp or *html in root folder of webapp and images you want to display in same root folder browser cannot acess the image in WEB-INF folder
I also had a similar problem and tried all of the above but nothing worked.
And then I noticed that the image was loading fine for one file and not for another. The reason was: My image was named image.jpg and a page named about.html could not load it while login.html could. This was because image.jpg was below about and above login. So I guess login.html could refer to the image and about.html couldn't find it.
I renamed about.html to zabout.html and re-renamed it back. Worked.
Same may be the case for images enclosed in folders.
the easy way to do it to place the image in Web Content and then right click on it and then open it by your eclipse or net beans web Browser it will show the page where you can see the URL which is the exact path then copy the URL and place it on src=" paste URL " ;
If we are using asp.net "FileUpload" control and want to preview image before upload we can use below code.
<asp:FileUpload ID="fileUpload" runat="server" Style="border: none;" onchange="showpreview(this);" />
<img id="previewImage" src="C:\fakepath\natureImage.jpg">
<script>
function showpreview(Imagepath) {
var reader = new FileReader();
reader.onload = function (e) {
$("#previewImage").attr("src", e.target.result);
}
reader.readAsDataURL(Imagepath.files[0]);
}
</script>
Another random reason for why your images might not show up is because of something called base href="http://..." this can make it so that the images file doesn't work the way it should. Delete that line and you should be good.
You need to import your image from the image folder.
import name_of_image from '../imageFolder/name_of_image.jpg';
<img src={name_of_image} alt=''>
Please refer here.
https://create-react-app.dev/docs/adding-images-fonts-and-files -
The folder names in the path should not contain the space
write fullstack /asset/image.jpg instead of full stack/asset/image.jpg
In the code below, I am using an image images/newlogo.PNG for a logo. I am trying to add the same logo to a WordPress blog, but WordPress can't seem to find the logo. Any idea where I should put the image so that WordPress can find it?
Thanks in advance,
John
<div class="newlogo">
<a href="index.php">
<img src="images/newlogo.PNG" alt="Books" border="0"/>
</a>
</div>
My experiece with WordPress is many times you need the full path for images called outside of the style sheet, because your full path is something like username/public_html/wordpresshere
Best to put images in your theme so they stay put whn you change themes or go along when you download/backup themes
So, hardcode your full path from your URL, or:
Use this to return site URL:
<?php bloginfo('url'); ?>/wp-content/themes/default/images/newlogo.png
Or this to return the current template directory:
<?php bloginfo('template_directory'); ?>/images/newlogo.png
Like this:
<img src="<?php bloginfo('template_directory'); ?>/images/newlogo.PNG" alt="Books" border="0"/>
If you use an 'absolute' path (relative to the server) like this:
<img src="/images/newlogo.PNG" alt="Books" border="0"/>
You just need to put the image in the images folder in the root of the server
I think you need to have the file in the wp-content folder.
If you are adding this code into a theme file, you need to use the path to the image directory within the theme directory. This can be done by using get_template_directory_uri().
Here is an example:
<div class="newlogo">
<a href="index.php">
<img src="<?php echo get_template_directory_uri(); ?>images/newlogo.PNG" alt="Books" border="0"/>
</a>
</div>