如何将EJS的articles.image值传入img标签的src属性？

你的核心问题是数据存储和视图渲染逻辑错位：服务器端把完整的img标签存在了articles.image字段里，而非单独的图片URL，同时EJS写法也不符合正确的渲染逻辑。

步骤1：修正Server.js中的数据结构 #

把articles数组里的image字段改成纯图片URL，不要包含任何HTML标签：

const express = require('express')
const app = express()

const router = require('./routes/article')

app.use('/articles', router) // 注意补全前缀斜杠，否则路由匹配会出错

app.set('view engine', 'ejs')

app.get('/', (req, res) => {
    const articles = [{
        title: 'Test Article',
        createdAt: Date.now(),
        quickDescription: 'quick description',
        // 仅保留纯图片URL
        image: 'https://media.discordapp.net/attachments/1148215519724441600/1148217149928767528/New_Project_1.png'
    }]
    res.render('index', { articles: articles })
})

app.listen(5000)

步骤2：修正EJS中的渲染代码 #

如果是渲染单篇文章（比如数组第一个元素）：

<img class="card-img-top" alt="文章图片" src="<%= articles[0].image %>">

如果是循环渲染所有文章（更通用的场景）：

<% articles.forEach(article => { %>
  <div class="card">
    <img class="card-img-top" alt="<%= article.title %>" src="<%= article.image %>">
    <div class="card-body">
      <h5 class="card-title"><%= article.title %></h5>
      <p class="card-text"><%= article.quickDescription %></p>
    </div>
  </div>
<% }) %>

为什么之前的写法无效？ #

你之前的EJS代码会生成两个独立的img标签：一个是空的<img class="card-img-top" alt="...">，紧接着又输出服务器端存储的完整img标签，最终HTML结构混乱，自然无法正确展示图片。

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