javascript - 图像不显示Reactjs中数组对象的map函数中的标记

Question

我不明白为什么这不起作用。我试图对相关问题进行一些研究，但我没有运气解决。

我有一个像这样的类数组对象和渲染这个类数组对象的组件：

const socialMediaResourceItems = 
[
    {
        id: 1,
        image: '../images/1.jpg',
        alt: 'hi',
        url: '#'
    },
    {
        id: 2,
        image: "../images/2.jpg",
        alt: 'hi',
        url: '#'
    }
]

const SocialMediaResources = () => {
    const socialMediaList = socialMediaResourceItems.map((socialMediaResourceItem) => {
    return (
            <li key={socialMediaResourceItem.id}>
                {/* <img src={require(`${socialMediaResourceItem.image}`)} alt={socialMediaResourceItem.alt} />   */}
                <img src={socialMediaResourceItem.image} alt={socialMediaResourceItem.alt} />  
            </li>
    )
})

return (
    <div className="link-groups">
        {socialMediaList}
    </div>
  )
};

export default SocialMediaResources

我已经厌倦了用相对路径导入它们并执行 src={../images/1.jpg}，它可以工作，但是当我将它们作为对象的属性时，它会显示一个像这样的小怪图

我还尝试将 require() 用于其他组件，它也可以正常工作。

我在这里想念什么？我认为我不需要为此使用 webpack。先感谢您

标签： javascriptreactjs

Answer 1

这是我找到的解决方案：

const socialMediaResourceItems = 
[
    {
         id: 1,
         image: '1.jpg',
         alt: 'hi',
         url: '#'
    },
    {
         id: 2,
         image: "2.jpg",
         alt: 'hi',
         url: '#'
    }
]

const SocialMediaResources = () => {
const socialMediaList = socialMediaResourceItems.map((socialMediaResourceItem) => {
return (
        <li key={socialMediaResourceItem.id}>
            <img 
                src={require(`../images/${socialMediaResourceItem.image}`)} 
                alt={socialMediaResourceItem.alt}
            />
        </li>
       )
})

return (
    <div className="link-groups">
        {socialMediaList}
    </div>
  )
};

export default SocialMediaResources