如何在 React 中链接图像
如何在 React 中链接图像
要在 React 中链接本地图像， 进口 文件顶部的图像并将其分配给 源代码 一个道具 图像 元素。
例如：
应用程序.js
// 从文件中导入图片
从'./my-image.jpg'导入myImage； 导出默认函数 App() {
返回 （
<div>
{/* 显示图片 */}
<img src={myImage} alt="树木" height="200" /> <br /> <span
风格={{
颜色：“绿色”，
字体大小：'1.2em'，
fontWeight: '粗体',
}}
>
树木
</span>
</div>
);
}
这种方法在使用基于 Webpack 的工具（如 Create React App）时有效。
请注意，图像文件必须在项目目录中才能成功导入。如果文件位于项目目录之外，则会发生错误。
在 React 中链接图像 要求（） 功能
或者，我们可以使用 要求（） 在 React 中链接图像的函数。
下面的代码示例将在页面上产生与第一个示例完全相同的结果。
应用程序.js
导出默认函数 App() {
返回 （
<div>
{/* */}
<img
src={require('./my-image.jpg')}
alt="树"
高度=“200”
/> <br />
<span
风格={{
颜色：“绿色”，
字体大小：'1.2em'，
fontWeight: '粗体',
}}
>
树木
</span>
</div>
);
}
优势 要求（） 这里有它不需要在页面顶部。我们可以简单地分配结果 要求（） 到 源代码 prop 无需将其存储在变量中。
链接图片 上市 文件夹
在 React 中链接图像的另一种方法是将其放在 上市 文件夹并使用其相对路径引用它。
例如，如果我们将 我的图像.png 文件中 上市 文件夹，我们将能够像这样在页面中显示它：
应用程序.js
导出默认函数 App() {
返回 （
<div>
{/* 显示图片 */}
<img src="./my-image.jpg" alt="树木" height="200" /> <br /> <span
风格={{
颜色：“绿色”，
字体大小：'1.2em'，
fontWeight: '粗体',
}}
>
树木
</span>
</div>
);
}
使用 上市 当我们有许多想要动态显示的图像时，文件夹是有利的。
在下面的示例中，我们动态显示放置在一个 网格 下的子文件夹 上市 , 并以某种模式命名 ( image-1.jpg , image-2.jpg , ..., image-100.png ) 在网格中。
应用程序.js
导出默认函数 App() {
返回 （
<div>
<div
风格={{
显示：'网格'，
网格模板列：
'重复（自动调整，最小最大（最小内容，250px））'，
间隙：'8px'，
}}
>
{[...Array(100)].map((_, i) => {
返回 （
<div>
{/* 动态链接图片 */}
<img
键={i}
src={`./grid/image-${i + 1}.jpg`}
样式={{宽度：'100%'，高度：'自动'}}
/>
</div>
);
})}
</div>
</div>
);
}
链接远程图像
如果图像是在线存储的，那么我们只需将图像的 URL 设置为 源代码 prop 链接并显示它，就像我们在纯 HTML 中所做的那样。
应用程序.js
导出默认函数 App() {
返回 （
<div>
{/* 显示远程图像 */}
<img
src="http://example.com/trees/my-image.jpg"
alt="树"
高度=“200”
/> <br /> <span
风格={{
颜色：“绿色”，
字体大小：'1.2em'，
fontWeight: '粗体',
}}
>
树木
</span>
</div>
);
}
最初发表于 编码beautydev.com
JavaScript 所做的每一件疯狂的事
关于 JavaScript 的细微警告和鲜为人知的部分的迷人指南。
注册 并立即获得免费副本。
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
