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。预先谢谢你

Answer 1

由于您已修复了“ ../images/”之类的图像路径，因此您也可以使用js字符串文字，例如"npm run dev" ../ images / $ {socialMediaResourceItem.image}，因为我在下面更新了您的代码：

src=

Answer 2

由于图像不在公共文件夹中，因此需要导入每个图像。请考虑以下代码

import image1 from '../images/1.jpg'
import image2 from '../images/2.jpg'
const socialMediaResourceItems = 
[
    {
        id: 1,
        image: image1,
        alt: 'hi',
        url: '#'
    },
    {
        id: 2,
        image: image2
        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

如果要避免导入图像，最好将图像放在react应用程序的公共文件夹中，并且可以将图像直接加载为

    const path = '1.jpg'
     .....
    render() {
         return(<img src={path} className="mr-10" alt="Loading" />)
}

Answer 3

这是我找到的解决方案：

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

图像未在React函数中的数组对象的映射函数中使用<li>标记显示

3 个答案: