如何在 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 版权协议，转载请附上原文出处链接和本声明

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