在Laravel中使用javascript进行动态图像

Using javascript for dynamic images in Laravel

本文关键字：动态 图像 javascript Laravel      更新时间：2023-09-26

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

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

   $(".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

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

你只需要改变这个; 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

根据评论和聊天中的讨论，这里的解决方案似乎是。

<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
相关文章：