我使用OMDB的API使用电影数据到我的网站,但有些电影没有海报数据,所以它发送src="N/A". <img src="<%=movie.Poster%>" alt="movie's poster" width="300px" height="450px">. 我在ejs中使用此代码来获取图像,但我希望在图像src="N/A"时更改图像src. 有人能帮帮忙吗?

以下是我的完整代码:

Index.js

import express from "express";
import bodyParser from "body-parser";
import pg from "pg"
import axios from "axios";

const app = express();
const port = 3000;
const API_URL = "https://www.omdbapi.com"
const apikey = "XXXXX"

let defaults = [
  {
    Title: "The Shawshank Redemption",
    Year: "1994",
    imdbID: "tt0111161",
    Type: "movie",
    Poster: "https://m.media-amazon.com/images/M/MV5BNDE3ODcxYzMtY2YzZC00NmNlLWJiNDMtZDViZWM2MzIxZDYwXkEyXkFqcGdeQXVyNjAwNDUxODI@._V1_SX300.jpg"
  },
  {
    Title: "The Godfather",
    Year: "1972",
    imdbID: "tt0068646",
    Type: "movie",
    Poster: "https://m.media-amazon.com/images/M/MV5BM2MyNjYxNmUtYTAwNi00MTYxLWJmNWYtYzZlODY3ZTk3OTFlXkEyXkFqcGdeQXVyNzkwMjQ5NzM@._V1_SX300.jpg"
  },
  {
    Title: "Breaking Bad",
    Year: "2008–2013",
    imdbID: "tt0903747",
    Type: "series",
    Poster: "https://m.media-amazon.com/images/M/MV5BYmQ4YWMxYjUtNjZmYi00MDQ1LWFjMjMtNjA5ZDdiYjdiODU5XkEyXkFqcGdeQXVyMTMzNDExODE5._V1_SX300.jpg"
  }
];

let movies = defaults;


const db = new pg.Client({
    user: "postgres",
    host: "localhost",
    database: "XXXXX",
    password: "XXXX",
    port: XXXX,
  });

db.connect();

app.use(bodyParser.urlencoded({ extended: true }));
app.use(express.static("public"));

app.get("/",async(req,res)=>{
  res.render("Index.ejs",{Movies:movies});
})

app.post("/",async(req,res)=>{
  movies=[];
  const title = req.body.title
  const type = req.body.type

  try{
    const result = await axios.get(`${API_URL}/?apikey=${apikey}&s=${title}&type=${type}`);
    const data = result.data;
    //console.log(data.Search);
    const response = data.Response; //response

    if(response === "False"){ //for respone "False"
    const error = data.Error; //error
    res.render("Index.ejs",{Movies:movies,Error:error});
    movies = defaults; //reset
    }else{ // for respone "True"
      const searchResult = data.Search;
      const first10movie = searchResult; //show only first 10 movies of searching
      //console.log(searchResult);
      movies=first10movie;
      //console.log(movies);
      
      res.redirect("/");
    }


  }catch(err){
console.log(err);
  }
})




app.listen(port, () => {
    console.log(`Server running on port ${port}`);
  });

Index.ejs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Review Movie Project</title>
</head>
<body>
    <h1>Review Movie</h1>

    <form action="/" method="post">
        <input name="title" type="text" placeholder="Title" required/>
        <select name="type">
            <option></option>
            <option value="movie">Movie</option>
            <option value="series">Series</option>
        </select>
        <button name="search" type="submit">Search</button>
    </form>

    <%if(Movies && Movies.length > 0){%>
        <%Movies.forEach((movie)=>{%>
            <form action="/review" method="post">
            <div>
            <img src="<%=movie.Poster%>" alt="movie's poster" width="300px" height="450px">
            </div>
        <%})%>
    <%} else { %>
            <h2>Error Response</h2>
            <p><%=Error%></p>
    <%}%>
    <script> var image = document.getElementById("image"); </script>
</body>
</html>

推荐答案

它是JavaScript,所以你可以使用三进制来设置src属性,例如,如果movie.Poster值是'N/A',则使用一些占位符图像,否则,使用值:

<img src="<%=movie.Poster === 'N/A' ? 'https://placehold.co/600x400' : movie.Poster  %>" alt="movie's poster" width="300px" height="450px">

您可以在服务器上设置占位符以使其更高效,并将其发送到视图:

const placeholderImg = 'https://placehold.co/600x400';

res.render("index.ejs",{Movies:movies,Error:error, placeholderImg});
<img src="<%=movie.Poster === 'N/A' ? placeholderImg : movie.Poster%>" alt="movie's poster" width="300px" height="450px">

Node.js相关问答推荐

monorepo内的NPM包使用不在注册表中的本地包

我的Node.js应用程序没有将Mongoose方法findByIdAndDelete作为函数进行检测

当变量在另一个文件中初始化时,在初始化错误之前无法访问变量

Prisma 和 Nextjs:重新部署之前内容不会更新

Mongodb - 在数组数组中查找()

npm 在 Windows 终端中不工作

结合后端(Express)和前端(Angular)路由

MongoDB 根据使用聚合的条件从嵌套数组中删除对象

在数组的另一个对象中获取数组的mongoose 对象

baseurl64 缓冲区解码

bash:npm:找不到命令?

来自 Node-aws 的 Dynamo Local:所有操作都失败无法对不存在的表执行操作

分块 WebSocket 传输

如何从 Redis 保存和检索会话

AngularJS +sails.js

为什么我们要为 Angular 2.0 安装 Node.js?

Bootstrap 中的 Grunt 依赖冲突

npm WARN 不推荐使用 graceful-fs@3.0.8:graceful-fs 版本 3

为什么 Node.js 被命名为 Node.js?

如何从 Node.js 应用程序Ping?