React技巧之导入并使用Image
总览
在React组件中导入并使用image：
- 导入本地图片，比如说，
import MyImage from './thumbnail.webp';。 - 将导入的图片传递给
img元素的src属性。 - 比如说，
<img src={MyImage} alt="horse" />。
// ?️ import the image
import MyImage from './thumbnail.webp';
export default function App() {
return (
<div>
{/* ?️ local image */}
<img src={MyImage} alt="horse" />
{/* ?️ external image */}
<img
src=""
alt="car"
/>
</div>
);
}
导入
我们使用ES6默认导入在React应用中导入图片。alt属性帮助屏幕阅读器来理解当前图片是关于什么的。
需要注意的是，img元素是自闭合标签 – <img /> 。
上面的例子假设你有一个名为thumbnail.webp的图片，和App组件位于同一文件夹下。
请确保为图片指定了正确的路径（包括扩展名）。
举例来说，如果要从上层目录导入一个图片，应该这么导入：import MyImage from '../thumbnail.webp' 。图片须位于项目的src目录中。
通常情况下，最好将图篇放在使用它们的组件旁边，以确保在你最终删除或改变组件时不会有多余的图片。
你可以使用该方法在React应用中导入并使用png, svg, webp, jpg 等图片。
// ?️ import SVG image
import MyImage from './logo.svg';
export default function App() {
return (
<div>
{/* ?️ local image */}
<img src={MyImage} alt="logo" />
{/* ?️ external image */}
<img
src=""
alt="car"
/>
</div>
);
}
public目录
如果图片位于public目录，当在img元素上设置src属性时，请使用图片的绝对路径。
比如说，如果有一张图片位于public/images/thumbnail.webp ，你应该设置src属性为"/images/thumbnail.webp" 。
export default function App() {
return (
<div>
{/* ?️ local image */}
<img src="/images/thumbnail.webp" alt="horse" />
{/* ?️ external image */}
<img
src=""
alt="car"
/>
</div>
);
}
require
如果你的设置中不能使用ES6的导入/导出语法，可以尝试使用require()。
export default function App() {
return (
<div>
{/* ?️ local image */}
<img src={require('./thumbnail.webp')} alt="horse" />
<img src={require('./logo.svg').default} alt="horse" />
</div>
);
}
上面的例子使用了require() 语法来导入两张图片，该图片位于和App组件相同的路径中。
外部URL
如果你需要显示一个来自外部URL的图片，请将img标签上的src属性设置为图片的完整URL。
export default function App() {
return (
<div>
<img
src=""
alt="car"
/>
</div>
);
}
上面的例子向我们展示了如何显示来自外部URL的图片。我们使用了img标签，并将它的src属性设置为指向图片的完整URL。
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布，任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站。本站所有源码与软件均为原作者提供，仅供学习和研究使用。如您对本站的相关版权有任何异议，或者认为侵犯了您的合法权益，请及时通知我们处理。
