在jade中使用javascript添加圖像

Question

我有以下layout.jade代碼，我想對javascript進行一些更改，以便每次重新加載頁面時都可以向頁面加載一些圖像。 我想用玉做。 這是我目前擁有的代碼：

html
  head
    title= title
    script(src='/libs/jquery/jquery.min.js')
    link(rel='stylesheet', href='/libs/bootstrap/css/bootstrap.min.css')
    link(rel='stylesheet', href='/stylesheets/style.css')

  body
      script(type='text/javascript').
       if (document.cookie.indexOf('mycookie')==-1) {
        document.cookie = 'mycookie=1';
       }
       else {
        alert('You refreshed!');
       }
    block content

它可以很好地進行刷新，並給我警報。 我有10張圖像，我想將它們循環添加到頁面中，以便每次刷新頁面時都加載下一張圖像，然后在最后一張圖像之后轉到第一張圖像。 我可以嘗試使用for循環而不是警報消息來加載圖像，但是當我嘗試在else語句中使用玉的標准方式添加圖像時，則未顯示圖像。

我嘗試創建一個reload.js頁面，然后在應用程序中調用它，依此類推。

誰能幫我從圖像文件夾中獲取圖像？

  img(border="0" src="images/3.jpg")

通過對此進行更改。 我想看看是否重新加載了頁面，然后加載了其他圖像。

謝謝

Answer 1

可能有多種方法可以做到這一點。 這是一個：您可以在服務器端使用會話 （與客戶端JS中的cookie相比，IMO更好地使用IMO）來創建一個變量，該變量保存所需的圖像（基於該變量）並將其傳遞給jade用該圖像編譯HTML。

像這樣：

服務器

app.get('/', function(req, res){
    // incrementation logic
    if(!req.session.myimage)
        req.session.myimage = 0;
    req.session.myimage++;
    if(req.session.myimage > 10)
        req.session.myimage = 1;

    // pass it onto Jade
    res.locals.myimage = req.session.myimage;

    res.render('index');
});

玉

img(border="0" src="images/#{myimage}.jpg")