I experienced an issue displaying my images via Laravel blade templating.
In my "change-profile.blade.php" file I have a form that allows authenticated users to change some profile info. In this specific case I want to display avatars based on gender input provided.
So far so good, my js works perfectly and my images url seems to be ok in terms of path. The problem is images result broken and I seriously don't know why. This is my code:
@extends('layout.main')
@section('content')
<form action="{{ URL::route('profile-change-profile') }}" method="post">
<fieldset class="change-profile">
<legend>Change Profile</legend>
<p>
<input type="radio" class="gender" name="gender" value="male" /><span>male</span>
<input type="radio" class="gender" name="gender" value="female" /><span>female</span>
</p>
<p>
<ul class="males gender">
@for ($i = 0; $i < 75; $i++)
<li><img src="{{ asset('assets/img/avatar/males/m-' . ($i+1) . '.png') }}" alt="avatar_male_{{ $i+1 }}"></li>
@endfor
</ul>
<ul class="females gender">
@for ($i = 0; $i < 40; $i++)
<li><img src="{{ asset('assets/img/avatar/females/f-' . ($i+1) . '.png') }}" alt="avatar_female_{{ $i+1 }}"></li>
@endfor
</ul>
<input type="hidden" class="avatar-src" name="avatar-src" value="" />
</p>
<p class="form-action">
<button type="submit">submit</button>
{{ Form::token() }}
</p>
</fieldset>
</form>
@stop
My images are stored as png files in public/assets/img/avatar/(females|males)/(m|f)-n.png
Any help?
Solution found! It wasn't something wrong in my code but just folder encryption. With folder encryption (due to zip folder or zip file saved on OSX) those files exist upon unzip process but they're not accessible (from a browser) until you disable the encryption itself manually. You can avoid this annoying problem experienced on Windows just right-clicking on "green" filename/folder, select advanced and get rid of the tick related to encryption (last one tick, left-bottom).
Have you tried?
<li><img src="/assets/img/avatar/male/m-{{$i+1}}.png" alt="avatar_male_{{ $i+1 }}"></li>
<li><img src="/assets/img/avatar/females/f-{{$i+1}}.png" alt="avatar_female_{{ $i+1 }}"></li>