[Next.js] Serve Optimized Images Using the Next.js Image Component
<p>The image component from Next.js comes with excellent performance optimizations that make it worth using. It comes with improved performance, better visual stability, faster page loads, and more!</p><p>In this lesson you’ll learn how to use this component to serve both local and remote images in your Next.js app.</p>
<p> </p>
<pre class="language-javascript"><code>import Image from "next/image";
// You don't need to put image into `public` directory but reocmmended
// you can put images anywhere you like
// import dog.png statically
import dog from '../dog.png';
// You can load image from remote server
// but you need to config domain in next.config.js
const TWITTER_IMG_URL = "https://pbs.twing.com/profile_iamges/xxxxxxx_400x400.jpg";
const Home = () => {
return (
<>
<Image src={dog} lat="cute dog" />
<Image src={TWITTER_IMG_URL} lat="Leader" alt="profile image" width={550} height={650} />
</>
)
}</code></pre>
<p> </p>
<p>next.config.js</p>
<pre class="language-javascript"><code>module.exports = {
images: {
domains: ['pbs.twimg.com']
}
}</code></pre>
<p> </p><br><br>
来源：https://www.cnblogs.com/Answer1215/p/16306218.html
頁:
[1]