我在动态背景图片上有一些问题。我可以看到mobileImage“ image-2.jpg”,但未加载desktopImage。我已经尝试过根据文档应用一些代码,但是我的代码出现错误,请查看一下并为我提供帮助。
下面是我的代码:
ProjectItem.js
import React from 'react';
import './ProjectItem.scss';
import useWindowWidth from '../../Hooks/useWindowWidth.js';
import desktopImage from '../../Assets/Images/Projects/Desktop/Image-1.jpg';
import mobileImage from '../../Assets/Images/Projects/Mobile/Image-2.jpg'
const ProjectItem = ({ desktopImage, title, viewProject }) => {
const imageUrl = useWindowWidth() >= 650 ? desktopImage : mobileImage;
const { windowWidth } = useWindowWidth();
return(
<div className="projectItem" style={{ backgroundImage: `url(${ imageUrl })`, height: '500px'}}>
{windowWidth >= 650 &&(
<>
<div className="title">{title}</div>
<div className="viewProject">{viewProject}</div>
</>
)}
</div>
);
};
export default ProjectItem
下面是我的代码:
ProjectItem.scss
.projectItem{
width: 600px;
height: 450px;
display: block;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
以下是错误:
控制台
./src/Components/Home/ProjectItem.js
Line 5:8: 'desktopImage' is defined but never used no-unused-vars
printWarnings @ webpackHotDevClient.js:138
handleWarnings @ webpackHotDevClient.js:143
push../node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage @ webpackHotDevClient.js:210
答案 0 :(得分:1)
通过查看您的代码,我认为问题在于desktopImage
内的ProjectItem
指的是desktopImage
的道具而不是{{ 1}}变量导入到组件上方。
因此解决方案是不从ProjectItem
的道具中破坏desktopImage
:
desktopImage
这也解释了警告,指出已定义ProjectItem
,但从未使用过。