如何在外部 Js 文件中链接公共目录答案

【问题标题】：How to link public directory in external Js file如何在外部 Js 文件中链接公共目录
【发布时间】：2018-02-21 02:00:25
【问题描述】：

在我的前端，我可以通过“资产”显示我的公共目录。在这里，当用户将鼠标悬停在图像上时，它应该显示我通过外部 JS 文件显示的其他图像。但在外部 Js 文件中，我无法通过 Asset 指示公共目录。我该怎么做？

  <a href="https://www.facebook.com/" target="_blank">
                <img id="facebook-icon" src="{{asset('frontEnd/images/icon/facebook-icon.svg')}}">
    </a>

//External Js file

$(document).ready(function(){
   $('#facebook-icon').hover(function(){
            $(this).attr('src','images/icon/facebook-hover-icon.svg');
            }, function(){
            $(this).attr('src','images/icon/facebook-icon.svg');
        });
     });

【问题讨论】：

标签： javascript php laravel laravel-5

【解决方案1】：

你必须在你的布局（如果可能的话，标题）中定义你的 javascript 中的基本 url，如下所示：

<script type="text/javascript">
var BASE_URL = {!! json_encode(url('/')) !!}
</script>

所以现在你可以在之后链接的每个 js 文件中执行此操作：

$(document).ready(function(){
   $('#facebook-icon').hover(function(){
            $(this).attr('src',BASE_URL+'images/icon/facebook-hover-icon.svg');
            }, function(){
            $(this).attr('src',BASE_URL+'images/icon/facebook-icon.svg');
        });
     });

或者你想做的任何事情都需要你网站的基本网址。

【讨论】：

【解决方案2】：

这是一个陷阱

你可以使用绝对路径来实现。

$(document).ready(function(){
$('#facebook-icon').hover(function(){
        $(this).attr('src','http://www.example.com/images/icon/facebook-hover-icon.svg');
        }, function(){
        $(this).attr('src','http://www.example.com/images/icon/facebook-icon.svg');
    });
 });

【讨论】：