使用 tailwind 在 React 中通过图像进行映射时遇到问题

Question

我目前正在尝试映射图像数组，但每当我调用该组件时，我都会得到除我尝试使用的图像之外的所有内容。

Skills.jsx 组件

import React from 'react'
import image1 from '../assets/images/html.png'
import image2 from '../assets/images/css.png'
import image3 from '../assets/images/javascript.png'
import image4 from '../assets/images/react.png'
import image5 from '../assets/images/typescript.png'
import image6 from '../assets/images/tailwind.png'


const Skills = () => {

    const images = [
        {
            id: 1, 
            img: image1,
            name: 'HTML'
        },
        {
            id: 2, 
            img: image2,
            name: 'CSS'
        },
        {
            id: 3, 
            img: image3,
            name: 'Javascript'
        },
        {
            id: 4, 
            img: image4,
            name: 'React'
        },
        {
            id: 5, 
            img: image5,
            name: 'Typescript'
        },
        {
            id: 6, 
            img: image6,
            name: 'Tailwind'
        },
    ]

  return (
    <div>
        <div className='grid grid-cols-3 gap-1 mt-10'>
            {images.map((image) => (
                <div key={image.id}>
                    <img href={image.img} alt={image.name} className='w-full h-full rounded-full p-3 my-10 border-2 border-black' />
                    <h2>{image.name}</h2>
                </div>
            ))}
        </div>
    </div>
  )
}

export default Skills

About.jsx 组件（我在其中使用技能组件）

import React, { useState, useEffect } from 'react'
import profilePic from '../assets/images/img1.jpeg'
import Skills from './Skills'

const About = () => {
    const [tab, setTab] = useState(false)

  return (
    <div id='about' className=''>
        <h1 className='text-5xl font-bold text-center text-[#001b5e] my-20 pb-10'>About Me</h1>
        <section id='container' className='grid grid-cols-2 w-[80%] m-auto justify-center'>
            <div id='left' className='w-[50%] justify-content'>
                <img src={profilePic} alt="" className='rounded-lg ml-32 mr-0 ' />
            </div>
            <div id='right' className=''>
                <h1 className='text-2xl text-center pb-5'>Get To Know Me</h1>
                <p className='pb-5'> 
                    My name is Anthony. Since I was a kid, I have always been intrigued with technology, 
                    which has now lead me to programming. I currently call Charleston home, but I've spent 
                    a fair amount of time in different cities here in South Carolina. My hobbies include 
                    coding, gaming, working out, and creating content on YouTube. 
                </p>


                <div>
                    <h1>My Education</h1>
                    <h2>College of Charleston | Charleston, SC</h2>
                    <span>Bachelor of Science: Computer Information Systems</span>
                    <p>
                        Relevant Coursework: Database Concepts, Dataset Organization & Management, 
                        Computer Programming I & II, Website Programming, Server-Side Web Programming, 
                        User Interface Development 
                    </p>
                    <h2>Spartanburg Methodist College | Greenville, SC</h2>
                    <span>Associate of Science: Computer Science</span>
                </div>
                <div>
                    <h1>My Skills</h1>
                    <Skills />
                </div>

            </div>
        </section>

    </div>
  )
}

export default About

这就是我尝试时得到的结果。

我正在尝试创建一个由 6 张图像组成的网格，其标题列在图像下方。

Answer 1

在 Skills.jsx 中，将 img 元素中的 href 属性替换为“src”。

  <img src={image.img}.../>