如何在 React 中链接图像

如何在 React 中链接图像

要在 React 中链接本地图像， 进口 文件顶部的图像并将其分配给 源代码 一个道具 图像 元素。

例如：

应用程序.js

// 从文件中导入图片
从'./my-image.jpg'导入myImage； 导出默认函数 App() {
返回 （

{/* 显示图片 */}

<span
风格={{
颜色：“绿色”，
字体大小：'1.2em'，
fontWeight: '粗体',
}}
>
树木

);
}

这种方法在使用基于 Webpack 的工具（如 Create React App）时有效。

请注意，图像文件必须在项目目录中才能成功导入。如果文件位于项目目录之外，则会发生错误。

在 React 中链接图像 要求（） 功能

或者，我们可以使用 要求（） 在 React 中链接图像的函数。

下面的代码示例将在页面上产生与第一个示例完全相同的结果。

应用程序.js

导出默认函数 App() {
返回 （

{/* */}
<img
src={require('./my-image.jpg')}
alt="树"
高度=“200”
/>

<span
风格={{
颜色：“绿色”，
字体大小：'1.2em'，
fontWeight: '粗体',
}}
>
树木

);
}

优势 要求（） 这里有它不需要在页面顶部。我们可以简单地分配结果 要求（） 到 源代码 prop 无需将其存储在变量中。

链接图片 上市 文件夹

在 React 中链接图像的另一种方法是将其放在 上市 文件夹并使用其相对路径引用它。

例如，如果我们将 我的图像.png 文件中 上市 文件夹，我们将能够像这样在页面中显示它：

应用程序.js

导出默认函数 App() {
返回 （

{/* 显示图片 */}

<span
风格={{
颜色：“绿色”，
字体大小：'1.2em'，
fontWeight: '粗体',
}}
>
树木

);
}

使用 上市 当我们有许多想要动态显示的图像时，文件夹是有利的。

在下面的示例中，我们动态显示放置在一个 网格 下的子文件夹 上市 , 并以某种模式命名 ( image-1.jpg , image-2.jpg , ..., image-100.png ) 在网格中。

应用程序.js

导出默认函数 App() {
返回 （

<div
风格={{
显示：'网格'，
网格模板列：
'重复（自动调整，最小最大（最小内容，250px））'，
间隙：'8px'，
}}
>
{[...Array(100)].map((_, i) => {
返回 （

{/* 动态链接图片 */}
<img
键={i}
src={./grid/image-${i + 1}.jpg}
样式={{宽度：'100%'，高度：'自动'}}
/>

);
})}

);
}

链接远程图像

如果图像是在线存储的，那么我们只需将图像的 URL 设置为 源代码 prop 链接并显示它，就像我们在纯 HTML 中所做的那样。

应用程序.js

导出默认函数 App() {
返回 （

{/* 显示远程图像 */}
<img
src="http://example.com/trees/my-image.jpg"
alt="树"
高度=“200”
/>
<span
风格={{
颜色：“绿色”，
字体大小：'1.2em'，
fontWeight: '粗体',
}}
>
树木

);
}

最初发表于 编码beautydev.com

JavaScript 所做的每一件疯狂的事

关于 JavaScript 的细微警告和鲜为人知的部分的迷人指南。

注册 并立即获得免费副本。

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/39008/36212411