Question

对于我的laravel网站，我有一个导航和一个图像容器。

容器内的图像会根据鼠标悬停的导航项而变化。

   $(".ddNavItem a, .tier1Nav2").mouseenter(function(){
        itemID = $(this).attr('id');
        newImg = "<img src='images/nav/" + itemID + ".png' >";
        $(".dropImg").html(newImg);
   });

现在这个工作正常，直到我将我的网站切换到laravel。我的导航现在只能在网站的根公共目录中使用。

所以我尝试使用资产标签。

    $(".ddNavItem a, .tier1Nav2").mouseenter(function(){
        itemID = $(this).attr('id');
        newImg = "<img src='{{ asset('images/nav/" + itemID + ".png') }}' >";
        $(".dropImg").html(newImg);
   });

这没有用。路径出现了

http://localhost/mysite/public/images/nav/" + itemID + ".png

被困在这几个小时，我想知道是否有人可以帮忙。提前谢谢！

Answer 1

基于评论中的讨论和聊天，这里的解决方案似乎是什么。

<img src='images/nav/"

可以更改为

<img src='/images/nav/"

在

$(".ddNavItem a, .tier1Nav2").mouseenter(function(){
    itemID = $(this).attr('id');
    newImg = "<img src='images/nav/" + itemID + ".png' >";
    $(".dropImg").html(newImg);
});

需要将XAMPP（本地环境）中的根文件夹更改为Laravel安装文件夹中的public文件夹，以便可以在

中访问图像

http://localhost/images/nav/

在硬盘上，它们位于

/LaravelInstallationFolder/public/images/nav

Answer 2

你只需要改变它; newImg = "<img src='{{ asset('images/nav/" + itemID + ".png') }}' >";对此; newImg = "<img src='{{ asset('images/nav/') }} + itemID + \".png\"' >";。

这应该为您生成正确的HTML img标记。

整体来说就是这样：

$(".ddNavItem a, .tier1Nav2").mouseenter(function(){
    itemID = $(this).attr('id');
    newImg = "<img src='{{ asset('images/nav/') }} + itemID + \".png\"' >";
    $(".dropImg").html(newImg);
});

这应该产生：

http://localhost/mysite/public/images/nav/{id}.png

在Laravel中使用javascript动态图像

2 个答案: