引入背景图片
1.使用styled-compinents库,使用background属性
//style.js
import styled from "styled-components";
import logoImg from "@/assets/img/logo.jpeg";
export const HomeWrapper = styled.div`
/*方法一 */
background: url(${require("@/assets/img/logo.jpeg")}) center/cover;
/*方法二 */
/* background: url(${logoImg}) center/cover; */
height: 529px;
`;
//Home.jsx
import React, { memo } from 'react'
import {HomeWrapper} from './style'
const Home = memo(() => {
return (
<HomeWrapper>
<div className="banner"></div>
</HomeWrapper>
)
})
export default Home
2.使用img标签显示
//Home.jsx
import React, { memo } from 'react'
import logoImg from '@/assets/img/logo.jpeg'
const Home = memo(() => {
return (
<div className="banner">
<img src={logoImg} alt="" />
</div>
)
})
export default Home