Javascript 为什么可以'；我是否成功地从表单中获取url，并将其归属于图像的源（src）？

我的Node/Express代码出现了一个不应该出现的问题。我一辈子都不能让image source（src）属性工作，因此从表单添加的图像不会显示。它只是显示为未知。我不知道哪里出了问题，并且已经将整个代码检查了很多次，但似乎没有什么不对劲的地方

JS代码如下所示：

var express    = require("express"),
    app        = express(),
    bodyParser = require("body-parser"),
    mongoose   = require("mongoose");

mongoose.connect("mongodb://localhost/yelpcamp");
app.use(bodyParser.urlencoded({extended: true}));
app.set("view engine", "ejs");

//Camp Schema
var campgroundSchema = new mongoose.Schema({
    name: String,
    image: String
});

var Campground = mongoose.model("Campground", campgroundSchema);

app.get("/", function(req, res) {
    res.render("landing");
});

app.get("/campgrounds", function(req, res){
    Campground.find({}, function(err, sites) {
        if(err) {
            console.log(err);
        }
        else {
            res.render("campgrounds", {
                campgrounds:sites
            });
        }
    });
});

app.post("/campgrounds", function(req, res){
    //Fetching data from form
    var name = req.body.campName;
    var url = req.body.imageUrl;
    var newCamp = {
        name: name, 
        image: url
    };
    //New Campground and Save to DB
    Campground.create(newCamp, function(err, campground) {
        if(err) {
            console.log(err);
        }
        else {
            //Redirect to Camp Page
            console.log(campground);
            res.redirect("/campgrounds");
        }
    });
});

app.get("/campgrounds/new", function(req, res){
    res.render("new");
});

app.listen(4500, function(){
   console.log("Yelp Camp Server Started!!!"); 
});

以下是相关的EJS代码：

表格EJS

<div class="container">
    <form action="/campgrounds" method="POST">
        <label for="campName">Name</label>
        <input type="text" id="campName" name="campName" placeholder="Add Campground Name">
        <label for="campImage">Image</label>
        <input type="url" id="campImage" name="imageUrl" placeholder="Add Image Url">
        <input type="submit" name="submit" value="Add Campground">
    </form>
    <a href="/campgrounds">Go Back</a>
</div>

<div class="container">     
    <h1 style="margin-top: 8%;">Campgrounds Presentation</h1>
    <div class="row">
        <% campgrounds.forEach(function(campground) { %>
        <div class="col-md-4 col-sm-6 col-xs-12">
            <div class="thumbnail">
                <img src="<%= campground.image %>">
                <h3 class=text-center><%= campground.name %></h3>
            </div>
        </div>
        <% }); %>
    </div>
</div>

名称
形象

添加图像EJS

<div class="container">
    <form action="/campgrounds" method="POST">
        <label for="campName">Name</label>
        <input type="text" id="campName" name="campName" placeholder="Add Campground Name">
        <label for="campImage">Image</label>
        <input type="url" id="campImage" name="imageUrl" placeholder="Add Image Url">
        <input type="submit" name="submit" value="Add Campground">
    </form>
    <a href="/campgrounds">Go Back</a>
</div>

<div class="container">     
    <h1 style="margin-top: 8%;">Campgrounds Presentation</h1>
    <div class="row">
        <% campgrounds.forEach(function(campground) { %>
        <div class="col-md-4 col-sm-6 col-xs-12">
            <div class="thumbnail">
                <img src="<%= campground.image %>">
                <h3 class=text-center><%= campground.name %></h3>
            </div>
        </div>
        <% }); %>
    </div>
</div>

营地介绍
">

请详细说明“未知”。我得到的是生成的html代码而不是返回的html代码。您是否尝试记录“campgrand.find”方法的输出？图像URL是否在其输出中？实际上，我刚刚让它工作。出于某种原因，更改输入类型（以EJS形式）从url到文本成功了。不知道为什么，但一切都很好。干杯！