API返回图片为Null时无法显示默认图片的技术求助

Let's walk through fixing your default image logic step by step. The main issues with your current code are syntax errors and incorrect value-checking logic.

What's Wrong with the Original Code? #

1. Syntax Errors: You're missing dots (.) before the attr() method calls. Without them, JavaScript doesn't recognize that you're calling a method on the jQuery object.
2. Incorrect Value Checking: The arrow function you wrote isn't actually being executed—you're just assigning the function itself to $imgnew instead of using it to evaluate the image URL.
3. Unnecessary Element Creation: Creating two separate image elements ($img2 and userImage) adds unnecessary complexity; you only need one element with the correct source.

Corrected Code #

Here's the fixed version of your code snippet:

// Get the image URL from the API response
const performerImage = data2.events["1"].performers["0"].image;

// Define your default image URL
const defaultImageUrl = "https://imagemagick.org/image/gradients/linear_gradient.png";

// Determine which source to use: default if image is null/empty, else use the API image
const imageSource = performerImage === null || performerImage === "" 
  ? defaultImageUrl 
  : performerImage;

// Create the image element with the correct source
const $img = $("<img />").attr("src", imageSource);

// Append the image to your target container
$('#img2').append($img);

Alternative Using Nullish Coalescing Operator #

If you only need to handle null or undefined values (and not empty strings), you can use the cleaner nullish coalescing operator (??):

const performerImage = data2.events["1"].performers["0"].image;
const defaultImageUrl = "https://imagemagick.org/image/gradients/linear_gradient.png";
const $img = $("<img />").attr("src", performerImage ?? defaultImageUrl);
$('#img2').append($img);

Key Improvements #

• Explicit Condition Checking: We directly check if the API's image field is null (or empty string, if needed) and switch to the default URL accordingly.
• Single Image Element: We create one image element with the correct source instead of two separate ones.
• Proper jQuery Method Calls: Fixed the syntax by adding dots before attr().

Bonus: Adding Safety Checks #

To avoid errors if the API response structure changes (e.g., events[1] or performers[0] don't exist), you can add optional chaining:

const performerImage = data2?.events?.[1]?.performers?.[0]?.image;
const defaultImageUrl = "https://imagemagick.org/image/gradients/linear_gradient.png";
const $img = $("<img />").attr("src", performerImage ?? defaultImageUrl);
$('#img2').append($img);

This ensures that if any part of the path to image is missing or undefined, performerImage will be undefined, and we'll fall back to the default image.

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