reactjs - 如何解决 ReactJS 背景图像不起作用

问题描述

你好，所以我正在开发一个类似应用程序的 Tinder 克隆，所以我想使用 JSX 的内联样式将图像添加到卡片中，以便我可以访问具有人物图像的对象，但是它不会呈现该图像但是它呈现的名称，据我了解，如果它可以呈现它应该能够呈现图像的名称，我可以得到帮助。

下面的代码：TinderCards 组件

    const TinderCards = () =>{

    const [people, setPeople] = useState([

        {
            name: 'Beyonce',
            url: 'https://www.google.com/imgres?imgurl=https%3A%2F%2Fi.guim.co.uk%2Fimg%2Fmedia%2Fb7d881ef7d3fbddf351d3b8b01e13553c644d669%2F0_0_2703_2270%2Fmaster%2F2703.jpg%3Fwidth%3D700%26quality%3D85%26auto%3Dformat%26fit%3Dmax%26s%3Db41f0033c8595a6c348a5e7d5856a161&imgrefurl=https%3A%2F%2Fwww.theguardian.com%2Flifeandstyle%2F2018%2Faug%2F10%2Fmeaning-beyonce-dispatch-inside-the-beyhive&tbnid=eAPsSE97D5rVqM&vet=12ahUKEwjeuMjk65XrAhWBjxoKHbApBp8QMygAegUIARDIAQ..i&docid=BO1VGL_FO__UzM&w=700&h=588&q=Picture%20of%20Beyonce&client=firefox-b-d&ved=2ahUKEwjeuMjk65XrAhWBjxoKHbApBp8QMygAegUIARDIAQ'
        },
        {
            name: 'Jay Z',
            url: 'https://www.google.com/imgres?imgurl=https%3A%2F%2Ftownsquare.media%2Fsite%2F812%2Ffiles%2F2019%2F11%2Fjay-z.jpg%3Fw%3D980%26q%3D75&imgrefurl=https%3A%2F%2Fwww.xxlmag.com%2Fjay-z-ahmaud-arbery-lawyer-private-jet-court%2F&tbnid=MMF2ad9EJS69wM&vet=12ahUKEwiI8aX565XrAhUC0xoKHcmbBZIQMygCegUIARDBAQ..i&docid=1Kch3x6EX1i1pM&w=980&h=653&q=Picture%20of%20Jay%20z&client=firefox-b-d&ved=2ahUKEwiI8aX565XrAhUC0xoKHcmbBZIQMygCegUIARDBAQ'
        }
    ]);

    return(

        <div style={style}>

            <div className="tinder-card__container">

                {people.map((person) => {

                    return( 

                    <TinderCard className="swipe"
                        key={person.name}
                        preventSwipe={['up', 'down']}>

                        <div 
                         style={{ backgroundImage: `url(${person.url})` }}
                         className="card">


                         <h3>{person.name}</h3>
                 
                        </div> 
                     </TinderCard>
            
                     )
                
     
        
        
            </div>
        
        </div>

    )
}

export default TinderCards;

图像是我得到的输出，即没有图像被渲染

标签： reactjs

如果您想包含本地图像（如您在评论中所述），只需使用require函数。

<div style={{ backgroundImage: `url(require("images/Beyonce.png"))` }} className="card">

或者

import BeyonceImg from './your_dir_path/images/Beyonce.png';

<div style={{ backgroundImage: `url(${BeyonceImg})` }} className="card">

reactjs - 如何解决 ReactJS 背景图像不起作用

问题描述

解决方案

推荐阅读