html5 - 使用ejs模板时，css样式丢失，无法加载-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

html5 - 使用ejs模板时，css样式丢失，无法加载

天蓬老师 2017-04-17 11:24:58

[HTML讨论组]

573

使用nodejs后台，前端用ejs模板。但在查看时，发现css样式都显示不出来。怎么才能正常显示样式呢？

<link rel = "styesheet" href="../public/css/common.css">

ejs放在views文件夹下，css js jpg等放在public下

天蓬老师

欢迎选择我的课程，让我们一起见证您的进步~~

全部回复(4)

阿神2017-04-17 11:26:58 4楼

客户端浏览器访问到的url根路径就是public
<link rel = "styesheet" href="/css/common.css">

赞 +0

添加回复

黄舟2017-04-17 11:26:58 3楼

这样的相对目录的解析方式好多时候还是很蛋疼的，所以建议你可以采用：

<% if(settings.config.WEB_PRODUCTION){ %>

    <!-- INCLUDE STYLESHEET -->
    <link rel='stylesheet' href='http://fonts.useso.com/css?family=Open+Sans:300,400,600&subset=latin,latin-ext'>
    <link rel="stylesheet" href="http://cdn.bootcss.com/font-awesome/4.2.0/css/font-awesome.min.css">
    <!-- INCLUDE JAVASCRIPT -->
    <script src="http://cdn.bootcss.com/modernizr/2.6.2/modernizr.min.js"></script>

<% }else{ %>

    <!-- INCLUDE STYLESHEET -->
    <link rel="stylesheet" href="/public/vendors/bower_components/font-awesome/css/font-awesome.min.css">
    <!-- INCLUDE JAVASCRIPT -->
    <script src="/public/vendors/bower_components/html5-boilerplate/js/vendor/modernizr-2.6.2.min.js"></script>
<% } %>

利用/path这样的目录来解析到域名的根目录下得公共资源文件夹。

赞 +0

添加回复