javascript - 在 Laravel Blade 中循环并显示图像，更改旧的 Angular 代码

Question

我正在尝试更改在我们网站(在 Laravel 中)的图像上进行的 Angular 重复。我正在从所有内容中删除 Angular ，并尝试在 Blade 中的 laravel 循环中完成所有操作。

我成功地更改了所有内容以与我们的 Controller 一起使用，并且正在收集图像名称，但在前端它只显示图像名称而不是图像本身。

这是来自 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>

这是我的新代码(显示正确的图像名称，但仅显示名称而不是实际图像):

@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

我在从 Angular 到 Laravel 的转换过程中是否忽略了一些会导致图像不显示的东西？

Answer 1

首先，需要将img标签中的ng-src替换为src:

<img src="/imagelib/mediums/{{ $image_name }}" />

然后，由于 $image_name 包含 CSV，因此您需要删除图像名称。你可以这样做:

substr($image_name, 0, strpos($image_name, ','));

如果你想从$image_name中提取第二个值，你可以这样做:

substr($image_name, strpos($image_name, ',') + 1);