Level 3
you can look at assest() or secure_assest() helpers: https://laravel.com/docs/5.3/helpers#method-asset
Aug 28, 2016
10
Level 1
image assets
Where do I put images and how do i reference them in my pages?
update: I had to have the image files under public. Like so:
public/images/1.png
and reference in code like this:
{{ asset('images/1.png') }}
Level 1
I just want something I can use like "<img src= "image" >" do i really need to use asset() for this?
Level 3
you can put what ever you want in the public folder
then if you do <img src="/imgs/image.jpg"> it will look for image in "public/imgs/image.jpg"
1 like
Level 1
I placed 3 images under public/images/ but I get broken image links
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="../../public/images/1.png" alt="">
</div>
<div>
</div>
<div>
</div>
</div>
Level 4
how does your code look like?
Level 1
welcome.php.blade
@extends('layout.master')
@section("page-title")
title
@endsection
@section("body")
<div class="container">
{{--Carousel--}}
<div class="row">
<div class="col-sm-12">
{{-- data-ride attribute tells the browser to run some JS --}}
<div id="my-slider" class="carousel slide" data-ride="carousel">
{{-- indicators --}}
{{-- wrapper for slides --}}
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="../../public/images/1.png" alt="">
</div>
<div>
</div>
<div>
</div>
</div>
{{-- next prev buttons--}}
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6 text-left">
<h1>HEADER TITLE</h1>
</div>
<div class="col-xs-6 text-right">
<h1>################</h1>
</div>
</div>
</div>
1 like
Level 7
Just do this:
src="{{ asset('images/1.png') }}"
1 like
Level 1
@usama.ashraf does not work, I have the images under resources/assets/images/
Level 7
That's not where public, static assets (like images, js, css etc) should be.
Put them inside public/images.
The resources/assets/ directory is for storing 'pre-processed' assets, so to speak.
For example, if you have 3 different CSS files but want to merge them into one and render that new single file in the browser (to increase page load speed). In this scenario, the 3 CSS files will be put somewhere inside resources/assets/.
These files can then be 'processed', and the new merged file will go inside public. I suggest reading up on asset management in Laravel.
6 likes
Level 2
If you want to keep your images in resource/assets/images you can copy it to public with gulp. Add this to your gulpfile.js
elixir(function(mix){
//
mix.copy('resources/assets/images', 'public/images');
}
and in your blade file
<img src="{{ url('images/my_image.jpg') }}>
3 likes
Please or to participate in this conversation.