如何在JavaScript文件中使用base_url或PHP变量？

核心问题是独立的.js文件不会被PHP服务器解析，你写在JS里的<?php echo base_url(); ?>会被浏览器当成普通字符串，导致图片路径错误，自然加载失败。下面是几种可行的解决方法：

方法1：在HTML中定义全局变量（推荐） #

在页面的<head>标签里，先通过PHP输出base_url到全局JS变量，再让JS文件引用这个变量：

<!-- 在PHP渲染的HTML文件中添加，确保这段代码在你的JS文件之前加载 -->
<script>
var baseUrl = '<?php echo base_url(); ?>';
</script>
<script src="你的js文件路径.js"></script>

然后在JS文件中修改代码：

$('#site-logo').find('img').attr({
    src: baseUrl + 'assets/images/logo/logo_dark@2x.png',
    width: '151',
    height: '45'
});

方法2：将JS代码嵌入PHP视图文件 #

如果你的JS代码量不大，可以直接把这段JS写在.php后缀的视图文件里（比如页面的<script>标签中），这样PHP会直接解析里面的base_url()：

<script>
$('#site-logo').find('img').attr({
    src:'<?php echo base_url(); ?>assets/images/logo/logo_dark@2x.png',
    width:'151',
    height:'45'
});
</script>

这种方式适合小片段JS，但不利于代码分离维护。

方法3：通过HTML的data属性传递变量 #

在页面的根元素（比如<body>）上添加data属性存储base_url，再用JS读取：

<!-- 在HTML中添加 -->
<body data-base-url="<?php echo base_url(); ?>">

然后在JS文件中获取并使用：

var baseUrl = $('body').data('base-url');
$('#site-logo').find('img').attr({
    src: baseUrl + 'assets/images/logo/logo_dark@2x.png',
    width: '151',
    height: '45'
});

内容的提问来源于stack exchange，提问作者Ritika mishra