如何在网页中展示对象变量？需遍历products展示链接+图片+标题

Hey there! Let's walk through how to iterate over your products object and render each item's link, image, and title on a webpage. I'll cover two common approaches—vanilla JavaScript (no frameworks) and a React component, since that's a go-to for many projects.

Vanilla JavaScript Approach #

First, set up a container in your HTML where the products will live:

<div id="products-container"></div>

Then use JavaScript to loop through the object values and build the DOM elements dynamically:

// Your products object
const products = {
  product1: { 
    link: 'skirollerprodukt1/affiliateId', 
    image: 'https://skirollet/image.png', 
    title: 'XRS02' 
  },
  product2: { 
    link: 'skirollerprodukt2/affiliateId', 
    image: 'https://skirollet/image2.png', 
    title: 'XRS06' 
  }
};

// Grab the container element
const container = document.getElementById('products-container');

// Loop through each product (convert object to array of values first)
Object.values(products).forEach(product => {
  // Create a card wrapper for each product
  const productCard = document.createElement('div');
  productCard.classList.add('product-card');

  // Create the link that wraps image and title
  const productLink = document.createElement('a');
  productLink.href = product.link;
  productLink.target = '_blank'; // Optional: open link in new tab

  // Add product image
  const productImage = document.createElement('img');
  productImage.src = product.image;
  productImage.alt = product.title; // Important for accessibility
  productImage.classList.add('product-image');

  // Add product title
  const productTitle = document.createElement('h3');
  productTitle.textContent = product.title;
  productTitle.classList.add('product-title');

  // Assemble all elements
  productLink.append(productImage, productTitle);
  productCard.appendChild(productLink);
  container.appendChild(productCard);
});

Add some basic CSS to style the product cards:

.product-card {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 1rem;
  margin: 1rem;
  max-width: 200px;
  display: inline-block;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.product-image {
  width: 100%;
  height: auto;
  border-radius: 4px;
}

.product-title {
  margin-top: 0.5rem;
  font-size: 1rem;
  text-align: center;
  color: #333;
}

React Component Approach #

If you're using React, here's a clean component that renders your products:

import React from 'react';

const ProductGallery = () => {
  const products = {
    product1: { 
      link: 'skirollerprodukt1/affiliateId', 
      image: 'https://skirollet/image.png', 
      title: 'XRS02' 
    },
    product2: { 
      link: 'skirollerprodukt2/affiliateId', 
      image: 'https://skirollet/image2.png', 
      title: 'XRS06' 
    }
  };

  return (
    <div style={{ display: 'flex', gap: '1.5rem', padding: '2rem', flexWrap: 'wrap' }}>
      {Object.values(products).map((product, idx) => (
        <div 
          key={idx} 
          style={{ 
            border: '1px solid #eee', 
            borderRadius: '8px', 
            padding: '1rem', 
            width: '200px',
            boxShadow: '0 2px 4px rgba(0,0,0,0.05)'
          }}
        >
          <a 
            href={product.link} 
            target="_blank" 
            rel="noopener noreferrer"
            style={{ textDecoration: 'none', color: 'inherit' }}
          >
            <img 
              src={product.image} 
              alt={product.title} 
              style={{ width: '100%', height: 'auto', borderRadius: '4px' }}
            />
            <h3 style={{ marginTop: '0.75rem', fontSize: '1rem', textAlign: 'center' }}>
              {product.title}
            </h3>
          </a>
        </div>
      ))}
    </div>
  );
};

export default ProductGallery;

Key Notes #

• We use Object.values(products) to convert the object into an array of product objects—this makes it easy to loop through with forEach (vanilla) or map (React).
• Wrapping the image and title in an <a> tag ensures users can click either to navigate to the product link.
• Always include an alt attribute for images (we use the product title here) to make your site accessible.
• In React, we use idx (index) as the key since your products don't have unique IDs—if you add unique IDs later, swap those in for better performance.

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