使用Array.prototype.map函数和模板文字。

const container = document.getElementById('products-cards-container');
const valuesCards = [{
    image: '../img/image1.png',
    title: 'title 1',
    content: 'super content 1',
  },
  {
    image: '../img/image2.png',
    title: 'title 2',
    content: 'super content 2'
  },
  {
    image: '../img/image-3.png',
    title: 'title3',
    content: 'blablablablbalbalbabla blablaba'
  },
]

function returnCards(valuesCards) {
  return "<div class=\"products-cards\">" + valuesCards.map(valuesCard => `
  <div>
    <div class="product-header">
      <img src="${valuesCard.image}"/>
    </div>
    <div class="product-content">
      <h4>${valuesCard.title}</h4>
      <p>${valuesCard.content}</p>
    </div> 
    <button class="info-button">+ info</button>
  </div>`).join('') + "</div>";
}

container.innerHTML = returnCards(valuesCards);

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

你可以这样做

const valuesCards = [
    { 
    image: '../img/image1.png', 
    title: 'title 1', 
    content: 'super content 1',
    },
    {
    image: '../img/image2.png', 
    title: 'title 2', 
    content: 'super content 2'
    },
    { 
    image: '../img/image-3.png', 
    title: 'title3', 
    content: 'blablablablbalbalbabla blablaba'
    },
   ];
   
   let cardHTML = '';
   valuesCards.map(element => {
        cardHTML += '<div> \
        <div class="product-header"> \
         <img src="'+element.image+'"/> \
        </div> \
        <div class="product-content"> \
           <h4>'+element.title+'</h4> \
         <p>'+element.content+'</p> \
        </div> \
        <button class="info-button">+ info</button> \
      </div> \
      ';
   });
   
document.getElementsByClassName('products-cards')[0].innerHTML = cardHTML;

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

const valuesCards = [
    { 
    image: '../img/image1.png', 
    title: 'title 1', 
    content: 'super content 1',
    },
    {
    image: '../img/image2.png', 
    title: 'title 2', 
    content: 'super content 2'
    },
    { 
    image: '../img/image-3.png', 
    title: 'title3', 
    content: 'blablablablbalbalbabla blablaba'
    },
   ]
valuesCards.map(card=> {
  var cardDiv = document.createElement('div');
  cardDiv.innerHTML = `
                <div class="product-header">
                  <img src="${card.image}"/>
                </div>
                <div class="product-content">
                  <h4>${card.title}</h4>
                  <p>${card.content}</p>
                </div> 
                <button class="info-button">+ info</button>`
  document.getElementsByClassName('products-cards')[0].appendChild(cardDiv);
})

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

您需要执行一个“for循环”，迭代valuesCards对象，并为每个值返回一个html模板，然后注入到DOM中所需的元素中。
例如：

// Define the object
    const valuesCards = [
      {
        'image': '../img/image1.png',
        'title': 'title 1',
        'content': 'super content 1',
      },
      {
        'image': '../img/image2.png',
        'title': 'title 2',
        'content': 'super content 2'
      },
      {
        'image': '../img/image-3.png',
        'title': 'title3',
        'content': 'blablablablbalbalbabla blablaba'
      }
    ]
    
    // Identify the DOM element to store cards
    cardsContainer = document.querySelector('#products-cards-container');
    
    // Create a loop that iterates over valuesCards object
    for (let value of Object.values(valuesCards)) {
      console.log(value.title);
        // Create an element to store new card content
        let newCard = document.createElement('DIV');
    
        // Add products-cards class to new element
        newCard.classList.add('products-cards');
    
        // Create a multiline string template with current values each time 
        cardHtml = `
           <div class="">              
            <div class="product-header">
                <img src="${value.image}"/>
            </div>
            <div class="product-content">
                <h4>${value.title}</h4>
                <p>${value.content}</p>
            </div> 
            <button class="info-button">+ info</button>
           </div>   
        `;
    
        // Append the new element to the cardsContainer element in DOM
        cardsContainer.appendChild(newCard);
    
        // Inject the template html on DOM's new append item
        newCard.innerHTML = cardHtml;
    
    }

重要提示！！在要打印卡片的html中创建id=“products-cards-container”的div元素。