我有一个带有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()来执行此操作-我不确定它是否会以完全相同的方式工作