英文:
I get "src="[object Object]"" on <img> when i load image with React.lazy on my web app
问题
我刚开始学习React JS来制作我的第一个Web应用，我遇到了这个问题：当我在我的const Image上使用React.lazy函数时，图片没有加载。
我已经搜索了很多，但不知道为什么这不起作用。如果你能帮助我，请:/。
import React, { Suspense } from 'react';
import '../style/App.css';
function App() {
const Image = React.lazy(() => import('../img/macbook.png'));
return (
<Suspense fallback={<div>Chargement...</div>}>
<header>
<div className="container">
<div className="items-left">
<h1>Lorem ipsum</h1>
<div>Lorem ipsum ipsum ipsum ipsum ipsum ipsum ipsum ipsum ipsum ipsum ipsum </div>
<button>Se connecter</button>
<button>En savoir plus</button>
</div>
<div className="items-right">
<img src={Image} height="10px" width="10" alt=""/>
</div>
</div>
</header>
<footer></footer>
</Suspense>
);
}
export default App;
我从React中导入了Suspense，就像在文档中一样。我创建了一个const，在其中执行了React.lazy函数，导入了我的图像的目录。
我在很多论坛上搜索了解决方案，但没有什么有效的（可能是因为我不太明白）。我将该函数放在我的function App() {...} 中。我也复制粘贴了文档示例，并将其集成到我想要的内容中。
英文:
I just started learning React JS to do my first web app and I have this problem: When I do a React.lazy function on my const Image, not image loading.
I have search and I don't have any idea why this isn't working. If you can help me please. :/
import React, { Suspense } from 'react';
import '../style/App.css';
function App() {
const Image = React.lazy(() => import('../img/macbook.png'));
return (
<Suspense fallback={<div>Chargement...</div>}>
<header>
<div className="container">
<div className="items-left">
<h1>Lorem ipsum</h1>
<div>Lorem ipsum ipsum ipsum ipsum ipsum ipsum ipsum ipsum ipsum ipsum ipsum </div>
<button>Se connecter</button>
<button>En savoir plus</button>
</div>
<div className="items-right">
<img src={Image} height="10px" width="10" alt=""/>
</div>
</div>
</header>
<footer>
</footer>
</Suspense>
);
}
export default App;
I import Suspense from React like on the doc. I do a const where I execute the React.lazy function with the import and the directory of my image.
I search on lot of forum but nothing work (probably because I don't understand).
Put the function on my function App() {...}.
Copy and paste the documentation example and integrate with what i want.
答案1
得分: 1
React.lazy() 用于加载 React 组件，要想延迟加载图片，请将 loading="lazy" 属性添加到你的 <img> 标签中。
<img src='../img/macbook.png' height="10px" width="10" alt="" loading="lazy"/>
英文:
React.lazy() is for loading react components, to lazy load images add the loading="lazy" attribute to your img
<img src='../img/macbook.png' height="10px" width="10" alt="" loading="lazy"/>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论