动态背景图像反应答案

【问题标题】：Dynamic Background Image React动态背景图像反应
【发布时间】：2023-03-28 00:59:01
【问题描述】：

我正在尝试根据item.imageLinks.smallThumbnail 的值动态选择backgroundImage。

如果我的 API 返回的数组有一个 smallThumbnail URL，那么我想将其用作 backgroundImage 或在 book.png 内使用本地默认 backgroundImage book.png。

下面是我的代码，但是当 item.imageLinks.smallThumbnail 是 undefined 并且它没有使用备用 book.png 时它不起作用但给了我错误：

Type Eror: Cannot Read 'smallThumbnail of undefined

请帮忙。

谢谢

return(
        <ol className="books-grid">
          {book.map( (item)  => (
              <li key={item.id}>
                <div className="book">
                  {item.shelf && (
                      <div className="book-top">
                        <div 
                          className="book-cover" 
                          style={{ width: 128, height: 193, backgroundImage: `url({${item.imageLinks.smallThumbnail} || ../public/book.png } )` }}></div>

【问题讨论】：

您的imageLinks 未定义。这意味着您的对象item 没有称为imageLinks 的属性。检查您的 item 对象。
我知道它没有图像链接，这是我试图在它不存在时处理的情况。

标签： html css reactjs

【解决方案1】：

如果 imageLinks 是 undefined 则它不是对象，因此您将无法使用点语法，因此尝试获取 smallThumbnail 时出错 属性。

试试这个：

<div
  className="book-cover"
  style={{
    width: 128,
    height: 193,
    backgroundImage: `url(${(item.imageLinks && item.imageLinks.smallThumbnail) || "../public/book.png"})`
  }}
></div>

...所以您首先要检查 imageLinks。

【讨论】：

它的工作，但现在它不以“../public/book.png”为背景，当图像链接不存在时，但它不再给出错误。
如果 imageLinks 没有定义，你想要什么？
我想我在这里犯了一些愚蠢的错误，因为现在我将 book.png 复制到了 src 文件夹中，然后只使用了基本的 url，比如
但是仍然没有在元素上设置属性 backgroundImage。
您是否设置了 Webpack 来处理图像的导入？如果是这样，那么您可以将其导入文件顶部：import bookImg from "../public/book.png"，然后将其用作 url：backgroundImage: `url(${(item.imageLinks && item.imageLinks.smallThumbnail) || bookImg})`

【解决方案2】：

由于您的 imageLinks 本身不是一个属性，您可以这样处理：

let imageUrl = item.imageLinks ? item.imageLinks.smallThumbnail : '../public/book.png';

return(
  <ol className="books-grid">
    {book.map( (item)  => (
        <li key={item.id}>
          <div className="book">
            {item.shelf && (
                <div className="book-top">
                  <div 
                    className="book-cover" 
                    style={{ width: 128, height: 193, backgroundImage: `url(${imageUrl})` }}></div>

【讨论】：

【解决方案3】：

在您的代码中，您需要处理未定义item.imageLinks 的情况，所以问题出在这一行：

`url({${item.imageLinks.smallThumbnail} || ../public/book.png })`

这里，如果imageLinks未定义，则该行将出错。

您可以像这样使用三元运算符：

`url({${(item && item.imageLinks && item.imageLinks.smallThumbnail) ? item.imageLinks.smallThumbnail : `../public/book.png`} })`

虽然这很难读。

我会考虑对其进行重构，以便在渲染方法的顶部有一个对象数组，您可以在其中存储每个项目的图像和图像 url，然后在您的渲染方法中对其进行迭代。

【讨论】：

我使用了三元表达式，但现在属性 bakgroundImage 没有设置。
@santosh 你能发布你从 API 返回的 JSON 吗？我认为它不是一个对象，而 imageLinks 是一个数组，所以你可能需要item.imageLinks[0].smallThumbnail 或类似的东西。
我得到一组对象作为回报，这是一个示例数组项。

【解决方案4】：

This is now solved, Below is the code that worked.

return(
        <ol className="books-grid">
          {book.map( (item)  => (
              <li key={item.id}>
                <div className="book">
                  {item.shelf && (
                      <div className="book-top">
                        <div className="book-cover" style={{ width: 128, height: 193, backgroundImage: `url(${(item.imageLinks && item.imageLinks.smallThumbnail) || "book.jpg"})` }}></div>

我在这里学到的一个技巧是使用 && 来检查未定义的，否则 JS 会报错。谢谢大家

【讨论】：

【解决方案5】：

如果您使用的是 react js，这是一个例子

从 'react' 导入 React, { Component, Fragment } 从 'react-router-dom' 导入 { Link }

const Post =（数据）=> { 返回（

        <div

            style={{
                backgroundImage: `linear-gradient(
                325deg,
                rgba(0, 36, 51, 1) 0%,
                rgba(98, 218, 255, 0.164) 100%
                ),url(${(data.img)})`
            }} className="cardService">
            <div>
                    <h1 className='serviceTitle'>{data.name}</h1>
                    <h6 className='serviceDescription'>{data.description}</h6>
            </div>
        </div>
    </Fragment>
)

}

导出默认帖子；

【讨论】：