Как загрузить изображения в js файл в Laravel

Question

Я хотел бы отобразить фотографии с помощью этой программы для работы с сеткой фотографий.

https://css-tricks.com/seamless-responsive-photo-grid/

В настоящее время я использую Laravel, и я могу отображать фотографии, используя приведенный ниже код

Клинок

@if($images->count())
    @foreach($images as $image)
        <div class='col-sm-4 col-xs-6 col-md-3 col-lg-3'>
        <a class="thumbnail fancybox" rel="ligthbox" href="images/{{ $image->image }}" title="{{ $image->title }}">                     
            <img class="img-responsive" alt="" src="images/{{ $image->image }}" />
        </a>         
        </div> <!-- col-6 / end -->
    @endforeach
@endif

JS

<script type="text/javascript">

function getRandomSize(min, max) {
  return Math.round(Math.random() * (max - min) + min);
}

for (var i = 0; i < 25; i++) {
  var width = getRandomSize(200, 400);
  var height =  getRandomSize(200, 400);
  $('#photos').append('<img src="images/{{ $image->image }}'+width+'/'+height+'/cats" alt="">');
}

</script>

Фотографии не отображаются. Не могли бы вы научить меня, как написать правильный код, пожалуйста?

Answer 1

Убедитесь, что изображения хранятся в каталогах внутри storage/app/public, и что вы связали папку storage, выполнив

php artisan storage:link

Затем, когда вы извлекаете из storage/app/public папку, используйте

{{asset('/directory/from/public/to/your/file')}}

Так что если у вас есть изображение, хранящееся как storage/app/public/images/foo.jpg, используйте что-то вроде этого:

<img src = "{{asset('images/foo.jpg')}}"

Я считаю, что это лучшая практика для хранения внешних ресурсов для Laravel проектов.