在laravel刀片中循环并显示图像，更改旧的角度代码

Question

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?

Answer 1

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);