Question

我是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....放在这里工作而不是索引。

如何正确链接这些图像。我也尝试使用＆＃34; / img＆＃34;但没有工作。

任何帮助将不胜感激。

Answer 1

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

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

OR

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

OR

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

Answer 2

一种方法是设置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>

Answer 3

在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
});

希望它有所帮助.. !!

Answer 4

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

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

然后使用它backstretch js as

 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元素具有相同布局的不同操作时，它将保持正确的图像路径。

使用Cakephp在javascript中更正图像的路径

4 个答案: