使用 Cakephp 的 javascript 中图像的正确路径答案

【问题标题】：Correct path for images in javascript using Cakephp使用 Cakephp 的 javascript 中图像的正确路径
【发布时间】：2014-03-25 13:16:53
【问题描述】：

我是 cakephp 新手，我有一个脚本，我将其转换为 cakephp。我有一个使用 4 个这样的图像的旋转背景：

$.backstretch([
    "img/bg/1.jpg",
    "img/bg/2.jpg",
    "img/bg/3.jpg",
    "img/bg/4.jpg"
], {
     fade: 1000,
     duration: 8000
});

当我使用控制器用户和操作登录打开像 name_domain.com 这样的脚本时，它会看到所有图像并且一切正常，但是当我尝试使用 register (controller=>users, action=>signup) 时，图像没有加载。但是我把../img.... 放在这里而不是在索引中。

如何正确链接这些图像。我也尝试使用“/img”但不工作。

任何帮助将不胜感激。

【问题讨论】：

标签： javascript cakephp

【解决方案1】：

在 default.ctp 中声明一个 javascript 变量

var IMAGE_HOST = "<?php echo $this->webroot.'/img/'; ?>";

现在你也可以在 javascript 文件中使用它了

<script>
$.backstretch([
    IMAGE_HOST + "bg/1.jpg",
    IMAGE_HOST + "bg/2.jpg",
    IMAGE_HOST + "bg/3.jpg",
    IMAGE_HOST + "bg/4.jpg"
], {
     fade: 1000,
     duration: 8000
});

希望对你有帮助..!!

【讨论】：

我就是这样解决问题的，谢谢你的回复:)
太棒了..请不要忘记接受帖子作为答案..享受

【解决方案2】：

尝试使用类似这样的完整路径。

$this->webroot.'img/myimage.jpg'

或

$this->Html->url('/img/myimage.jpg')

或

<?php Router::url('/img/myimage.jpg')?>

【讨论】：

嘿，谢谢，但这在 javascript 文件中不起作用。我需要类似的东西，只是我必须包含在一个 javascript 文件中。
您可能需要将js部分复制到.ctp文件中才能使用
@Essteffan，我已经更新了我的答案，您也可以根据上述答案尝试第三个选项。我觉得它会解决你的问题。
谢谢你，拉姆，我已经结合了你的回答和马丁的回答，它正在工作。最好的问候

【解决方案3】：

一种方法是设置一个 JavaScript 变量，然后在您的后续脚本中使用它。例如，在您的 app/Layouts/default.ctp 文件中，您可以：

<script>
    var img_path = "<?php echo Configure::read('App.imageBaseUrl'); ?>";
</script>

然后像这样在你的脚本中使用它：

<script>
    $.backstretch([
        img_path + "/bg/1.jpg",
        img_path + "/bg/2.jpg",
        img_path + "/bg/3.jpg",
        img_path + "/bg/4.jpg"
    ], {
         fade: 1000,
         duration: 8000
    });
</script>

【讨论】：

这是一个很好的解决方案，但我有一个小问题。当我在根目录（索引）上工作时，但是当我在 /users/signup 上时，在链接中添加用户，如下所示：name_domain/users/img/bg/... 它与 Ram 解决方案一起使用，就像这样 var img_path = "webroot ?>";
感谢您的解决方案，它对我很有帮助
我错过了 App.imageBaseUrl 只返回一个相对 URL。您需要将它与对您网站的基本 URL 的引用结合起来。类似于$this->webroot . Configure::read('App.imageBaseUrl')。

【解决方案4】：

我建议在您的布局中保存 webroot 路径，以便其范围保持全局

<div id="webroot" class="hide" data-url="<?php echo $this->webroot;?>"></div>

然后用它来回弹js作为

 var webroot = $('#webroot').attr('data-url');
    $.backstretch([
        webroot+ "img/bg/1.jpg",
        webroot+ "img/bg/2.jpg",
        webroot+ "img/bg/3.jpg",
        webroot+ img/bg/4.jpg"
        ], {
          fade: 1000,
          duration: 8000
});

当您使用与 webroot 元素具有相同布局的不同操作时，它将保持正确的图像路径。

【讨论】：

我已经这样做了，但如果有人遇到同样的问题，那是另一种方法。谢谢你
我建议这样做是因为这是更通用的方法