I'm trying to change an angular repeat
that was being done on images on our website (in laravel). I'm removing angular from everything and trying to get it all done in laravel loops in the blade.
I successfully changed everything to work with our controller and the image names are being collected, but on the front end it just shows the image names not the images themselves.
Here's the original (working code) from angular:
<li ng-repeat="i in x.image_names track by $index"><a href="/imagelib/mediums/{{::i.split(',')[0] }}" target=_blank><img ng-src="/imagelib/mediums/{{::i.split(',')[0] }}" style="width: 100%; height: auto;" /></a><span class="uk-text-center" style="padding: 0 0 5px;">{{ ::i.split(',')[1] }}</span></li>
And here's my new code (showing correct image names, but only the name not the actual image):
@foreach ($pgroup->image_names as $image_name)
<li><a href="/imagelib/mediums/{{ $image_name }}" target=_blank><img ng-src="/imagelib/mediums/{{ $image_name }}" style="width: 100%; height: auto;" /></a><span class="uk-text-center" style="padding: 0 0 5px;">{{ $image_name }}</span></li>
@endforeach
Am I overlooking something in my conversion from Angular to Laravel that would cause the images to not show up?
First of all, you need to replace ng-src
with src
in the img
tag:
<img src="/imagelib/mediums/{{ $image_name }}" />
Then, since $image_name
contains a CSV, you need to strip the image name. You can do this like:
substr($image_name, 0, strpos($image_name, ','));
If you want to extract the second value from $image_name
, you can do it like:
substr($image_name, strpos($image_name, ',') + 1);