在调整大小时，使用laravel中的资产函数加载图像

On resize, loading an image using the asset function in laravel

本文关键字：函数 图像 加载 laravel 调整 小时 使用      更新时间：2023-09-26

我有一个带有asset laravel函数加载的图像的标题:

<img class="logo" src="{{ asset('images/logo-long.gif') }}" id="logo-navbar"></img>

在我的JS脚本中，我希望它检查每当窗口的大小低于700px, img标签的src属性改变

所以我实现了这个:

$(window).resize(function(){
    width = $(window).width();
    if(width <= 700){
        $('#logo-navbar').attr('src', '??');
    }else{
        $('#logo-navbar').attr('src', '??');
    }
});

但我不知道如何告诉我的脚本生成一个路径像laravel的资产函数..

有什么想法吗?

当你使用JS更改图像URL时，你根本不应该使用PHP。这是不好的练习。只需手动创建图像URL:

var imageBig = '/images/logo-long.gif';
var imageSmall = '/images/logo-sm.gif';

这通常不是最好的方法，但您可以这样做:

JavaScript: 

$(window).resize(function(){
    width = $(window).width();
    if(width <= 700){
        $('#logo-navbar').attr('src', '/getAsset/images/logo-long.gif');
    }else{
        $('#logo-navbar').attr('src', '/getAsset/images/logo-long.gif');
    }
});

Routes.php 

Route::get("/getAsset/{any}", function ($asset) {
      return redirect(asset($asset));
})->where('any', '.*');

我有两种方法。

我要么有一个全局容器

var myApp = {};
在

中，我可以通过视图赋值，我赋值为inline

myApp.url = {{ asset('/') }}

或者，如果javascript在视图中

$(window).resize(function(){
    var assetUrl = "{{ asset('/') }}";
    width = $(window).width();
    if(width <= 700){
        $('#logo-navbar').attr('src', assetURL +'/images/logo-long.gif');
    }else{
        $('#logo-navbar').attr('src', assetURL + '/images/logo-long.gif');
    }
});

请注意，我通常使用url()而不是asset()来执行此操作-我不确定它是否会以完全相同的方式工作

相关文章：