Dynamic Background Image React

user_7568050 0
Viewed 14143

I am trying to select backgroundImage dynamically based on value of item.imageLinks.smallThumbnail.

If the array returned by my API has a smallThumbnail URL then I want to use that as the backgroundImage or use a local default backgroundImage of book.png inside ../public.

Below is my code, but it's not working when item.imageLinks.smallThumbnail is undefined and it's not using the alternate book.png but giving me the error:

Type Eror: Cannot Read 'smallThumbnail of undefined

Please help.

Thanks

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>
reactjs css html
6 Answers

If imageLinks is undefined then it is not an object so you won’t be able to use dot syntax, hence the error trying to get the smallThumbnail property.

Try this instead:

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

... so you are checking for imageLinks first.

user_78384010

Since your imageLinks itself is not a property you can handle this like so:

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>
user_57642200

in your code you need to handle the situation where item.imageLinks is not defined, so the problem is with this line:

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

Here, if imageLinks is undefined, the line will error out.

Instead you could use the ternary operator like this:

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

Although this is very hard to read.

I'd consider refactoring this so that you have an array of objects at the top of your render method, where you store the image and image url for each item and then iterate over that in your render method.

user_5503490 
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>

One trick that i learned here is using && to check for undefined otherwise JS will complain of error. Thanks Everyone

user_75680500

This is an exaple if you're using react js

import React, { Component, Fragment } from 'react' import { Link } from 'react-router-dom'

const Post = (data) => { return ( 

        <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>
)

}

export default Post;

user_120360710

Below is an example of code that works for me, adding double quote around it worked

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

return(

 <div className="book-cover" style={{ width: 128, height: 193, backgroundImage: `url("${imageUrl}")` }}></div>
user_103444060
Related