文章/答案/技术大牛

发布

社区首页 >问答首页 >利用Javascript动态显示Laravel叶片模板图像

问利用Javascript动态显示Laravel叶片模板图像
EN

Stack Overflow用户

提问于 2022-03-19 16:44:50

回答 1查看 103关注 0票数 0

日安！所以我又一次练习了网页开发，发现Laravel学习很有趣(而且我非常喜欢它)，我决定用它来重新创建我的投资组合网站。

所以问题是:我正在尝试显示一个名为designImages的文件夹中的图像列表，每次我有一个很好的UI设计时，都会更新这个列表。因此，让动态地准备是有意义的，这样我就不必为每个图像手动添加<img>标记，并且使我的过程变得更长。我计划只制作一个js文件，根据文件夹中当前的图像数量，只调整一次。

但问题是，当我在刀片页面上显示图像时，它会显示破损的图像图标在这里看。

编辑:当我试图检查元素时，图像没有显示，而是显示404错误。例如mywebsite.test/designImages/design-1。

我的js文件上的代码是

imageContainer = document.querySelector(".imageContainer")；

for (let i = 1; i < 14; i++) {
    const img = document.createElement("img");
    img.src = "{{ asset('designImages/design-${i}.png') }}";
    imageContainer.append(img);
}

主文件 (app.blade.php)用于my index.blade.php的代码是：

<body>
    @yield('content-5')
    @stack('head')
</body>

index.blade.php代码是：

@section('content-5')
    <div class="imageContainer">
        <!-- images will come here -->
    </div>
@endsection

@push('head')
    <script src="{{ asset('js/imageGrid.js')}}"></script>
@endpush

如有任何帮助或建议将不胜感激:)

-编辑-编辑

)更新的javascript代码如下：

const templateURL = "storage/designImages/design-?.png";
const imageContainer = document.querySelector(".imageContainer");

for (let i = 1; i < 14; i++) {
    const img = document.createElement("img");
    img.src = templateURL.replace("?", i);
    imageContainer.append(img);
}

javascript

php

laravel

回答 1

Stack Overflow用户

发布于 2022-03-20 02:17:24

使用以下代码修正了它：

const templateURL = "storage/designImages/design-?.png";
const imageContainer = document.querySelector(".imageContainer");

for (let i = 1; i < 14; i++) {
    const img = document.createElement("img");
    img.src = templateURL.replace("?", i);
    imageContainer.append(img);
}

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/71540096

复制

相似问题

问利用Javascript动态显示Laravel叶片模板图像
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问利用Javascript动态显示Laravel叶片模板图像EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问利用Javascript动态显示Laravel叶片模板图像
EN