NodeJS& HTML模板= IMG无法访问

时间:2018-02-24 17:43:08

标签: html node.js image ejs

我使用nodeJS(和express和EJS)来做一些模板html渲染,但是即使我的HTML页面没有任何问题,当我浏览nodeJS时它很奇怪......

https://image.noelshack.com/fichiers/2018/08/6/1519493923-capture.png

这里是我的nodeJS服务器(完整代码):

   // EXEMPLE :

    //function site(name, url, img_path, description, refcode){
    //    this.name = name;
    //    this.url = url;
    //    this.img_path = img_path;
    //    this.description = description;
    //    this.refcode = refcode;
    //}


    var placeholder = require("./site_placeholders.js");
    var mapSite = placeholder.siteMap;

//EXPRESS

    var express = require('express');

    var app = express();

    app.get('/', function(req, res) {
        res.setHeader('Content-Type', 'text/plain');
        res.end('Vous êtes à l\'accueil');
    });

    app.get('/site-list', function(req, res){
        res.setHeader('Content-Type', 'text/plain');
        res.end('Vous êtes à la liste des sites');
    })

    mapSite.forEach(function(value, key){
        app.get('/site/' + key, function(req, res){
            res.render('template.ejs', {name: value.name, imgpath: value.img_path, desc: value.description, url: value.url, refcode: value.refcode});
            //res.setHeader('Content-Type', 'text/plain');
            //res.end('Vous êtes sur la page du site' + value.name + " | " + value.url);
        })
    })

    app.use(function(req, res, next){
        res.setHeader('Content-Type', 'text/plain');
        res.send(404, 'Page introuvable !');        
        //PAGE 404
    });

    app.listen(8080);

这里是template.ejs的代码:



<!DOCTYPE html>
<html lang="en-US">
  <head>

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>FluxReferalls | Detailled Informations : <%= name %> </title>
    <meta name="description" content="Demo of Material design portfolio template by TemplateFlip.com."/>
    <link href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;amp;lang=en" rel="stylesheet">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link href="https://code.getmdl.io/1.3.0/material.indigo-red.min.css" rel="stylesheet">
    <link href="/styles/main.css" rel="stylesheet">
      
    <style>
      
        .copyContainer{
            color: red;
        }
      
    </style>
  </head>
<body id="top">
    <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
      
        <header class="mdl-layout__header mdl-layout__header--waterfall site-header">
            <div class="mdl-layout__header-row site-logo-row">
                <span class="mdl-layout__title">
                    <div class="site-logo"></div>
                    <span class="site-description">FluxReferalls | Home</span>
                </span>
            </div>
            <div class="mdl-layout__header-row site-navigation-row mdl-layout--large-screen-only">
                <nav class="mdl-navigation mdl-typography--body-1-force-preferred-font">
                    <a class="mdl-navigation__link" href="/index.html">Home</a>
                </nav>
            </div>
        </header>
    
      <div class="mdl-layout__drawer mdl-layout--small-screen-only">
            <nav class="mdl-navigation mdl-typography--body-1-force-preferred-font">
                <a class="mdl-navigation__link" href="/index.html">Home</a>
            </nav>
      </div>
        
    <br><br>    
    
        <main class="mdl-layout__content">
            <section class="section--center mdl-grid site-max-width" style= "padding-bottom: 2%">
                <div class="section--center mdl-cell mdl-card mdl-shadow--4dp portfolio-card">
                    <div class="mdl-card__media">
                        <img class="article-image" src="/img/<%= imgpath %>" border="0" alt=""> <!-- URL A REMPLACER PAR IMAGE DU SITE EN QUESTION ! -->
                    </div>
                    <div class="mdl-card__title">
                        <h2 class="mdl-card__title-text"><%= name %></h2>
                    </div>
                    <div class="mdl-card__supporting-text">
                        <%= desc %>
                    </div>                    
        <br>                    
                    <div class="mdl-card__actions mdl-card--border">
                        <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect mdl-button--accent" href="<%= url %>" target="_blank"> Go ! </a>
                        <button id="copy" type="button" class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect mdl-button--accent">Copy Ref Code !</button>
                    </div>
                </div>
            
        </section>

            <textarea readonly="readonly" id="to-copy" style="border:none; color: black; width: 100%; text-align: center; font-size: 3em"><%= refcode %></textarea> <!-- A REMPLACER PAR LE CODE SUR LE SITE EN QUESTION ! -->


    <footer class="mdl-mini-footer">
        
        <div class="footer-container">
            <div class="mdl-logo">Contact us to add your gambling website : <a href="../contact.html" target="_blank">Click here !</a> 
            | &copy; FluxMining 2018, Design inspired by : <a href="https://templateflip.com/" target="_blank">TemplateFlip</a></div>
            <ul class="mdl-mini-footer__link-list">
                <li></li>
                <li><a href="terms.html" target="_blank">Privacy & Terms</a></li>
            </ul>
        </div>
    </footer>
</main>
        
        
        <script src="https://code.getmdl.io/1.3.0/material.min.js" defer></script>
        <script>
            var toCopy  = document.getElementById( 'to-copy' ),
            btnCopy = document.getElementById( 'copy' );
            

            btnCopy.addEventListener( 'click', function(){
                toCopy.select();
                document.execCommand( 'copy' );
                return false;
            } );
            
        </script>
    </div>
  </body>
</html>
&#13;
&#13;
&#13;

即使我打开控制台,它看起来像是无法处理的,但这是正确的路径......

如果它无法工作,我肯定会在PHP中这样做......

度过一个美好的夜晚, 〜TBD

0 个答案:

没有答案