问题描述
我正在尝试根据随机和语言选择动态导入图像。 这是一个代码重构,所以这个代码在旧项目中运行良好。
它找不到模块并出错。 我想知道可能是什么问题以及我需要做些什么来解决它。
const BackgroundAnimation = () => {
const currentList = useSelector((state) => state.list.currentList);
const [animate,setAnimate] = useState(false);
const [url,setUrl] = useState('url("")');
const [nextUrl,setNextUrl] = useState("");
const getBackgroundUrl = () => {
const languageBG = getRandomLangCode();
const basePath = "../../assets/backgrounds/";
const src = require(`${basePath}desktop/bg-${languageBG}.jpg`);
setNextUrl(src);
};
useEffect(() => {
getBackgroundUrl();
},[]);
// Animation Loop
useEffect(() => {
setTimeout(() => {
setAnimate(!animate);
getBackgroundUrl();
},6000);
},[animate]);
//Static Background
useEffect(() => {
if (currentList !== null && window.innerWidth <= 767) {
const language = languagesBGKey[currentList.language.toLowerCase()];
const languagesList = languages[language];
const randomIndex = Math.floor(
Math.random() * (languagesList.length - 1 - 0) + 0
);
const languageBG = languagesList[randomIndex][1];
const src = require(`${basePath}mobile/bg-${languageBG}.jpg`);
const url = `url(${src})`;
setUrl(url);
}
},[currentList]);
return (
<>
<img
style={{ opacity: 0 }}
src={nextUrl}
onLoad={() => {
setUrl(`url(${nextUrl})`);
}}
onError={(e) => {
console.log(e);
}}
/>
<div
id="backgroundAnimation"
style={{
backgroundImage: url,}}
></div>
</>
);
};
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)