react 引入远程动态图片和引入本地图片

1. 引入本地图片

2.引入动态的图片地址

2.1.直接使用传递过来的地址

2.2. 使用跟本地对应的动态图片名称

通过require.context()实现引用

通过直接使用public文件夹下的图片

1. 引入本地图片

普通引入，知道具体的地址

import myImg from '../asset/image/person.png'export default Index(){return (<img src={myImg} alt="图片"/>)//##或者 这样 <img src={require('../asset/image/person.png')} alt="图片"/>
};

2.引入动态的图片地址

2.1.直接使用传递过来的地址

如果你动态传递过来的图片地址就是一个网络地址，比如：如下。那么直接使用就完事了（当然有可能直接用了在调试模式下不显示，这时候你可以打包项目，在index.html下看看有没有显示，一般是能正常显示的）

let myImgs = [{name: 'item1',imgUrl: 'http://api/img/person.png'},{name: 'item2',imgUrl: 'http://api/img/cap.png'},{name: 'item3',imgUrl: 'http://api/img/desk.png'},
]

2.2. 使用跟本地对应的动态图片名称

通过require.context()实现引用

require.context(directory,useSubdirectories,regExp)

directory:表示检索的目录

useSubdirectories：表示是否检索子文件夹

regExp:匹配文件的正则表达式,一般是文件名

比如是接口传递过来的一个图片名称组

/*
这种情况，接口只给了图片名称，图片在本地且图片名称需要跟传递过来的imgUrl名称对应（就算不对应那也得有点相似的地方方便你查找图片啊，不然你总不能通过意念去找吧）
*/let myImgs = [
{name: 'item1',imgUrl: 'person.png'},
{name: 'item2',imgUrl: 'cap.png'},
{name: 'item3',imgUrl: 'desk.png'}]const reqSvgs = require.context('../asset/image', true, /\.png$/);
const allSvgFilepaths = reqSvgs.keys();
//过滤之后的文件名称组，具体格式可以自行打印看看，在跟数据相对应来做处理//console.log(reqSvgs,'--reqSvgs');
// console.log(allSvgFilepaths, '--allSvgFilepaths');

//测试1   代码接上面const path = allSvgFilepaths[allSvgFilepaths.length - 1];//取最后一张图片地址const imgage = reqSvgs(path).default;//我这里图片在 reqSvgs(path).default 我看到的一篇文章中那位大佬好像是reqSvgs(path)可以直接拿到，大家可以自己打印看看再去具体引用// console.log(imgage, '--imgage');<img src={image} alt="图片"/>


//测试2   代码接上面
<div>{myImgs.map(item => { //判断一下本地有没有这张图片if(~allSvgFilepaths.findIndex(x=>x===`./${item.imgUrl}`)){let iUrl =reqSvgs(`./${item.imgUrl}`).default; return iUrl&&<img src={iUrl} alt={item.name} key={item.name}/>} })}</div>
//正确输出图片

通过直接使用public文件夹下的图片

如果上面这种不想用，且你的图片放在了 public 资源文件夹下面，那么你也可以通过相对路径的方式使用图片（打包之后./指向public文件夹下），打包之后因该是也能访问到的

  return (<img key={'item' + index} className="scenic-img" src={'./assets/icon/' + item.trim() + '.png'} />)

参考

require.context()的用法详解

https://blog.csdn.net/qq_34153210/article/details/106065816

完。

react 引入远程动态图片和引入本地图片相关推荐

java image to base64_Java实现base64图片编码数据转换为本地图片的方法
本文实例讲述了Java实现base64图片编码数据转换为本地图片的方法.分享给大家供大家参考,具体如下: 项目中用到的把base64图片数据转为本地图片的函数 /** * 替换html中的base64 ...
微信小程序 --- 图片自适应、本地图片的使用
1.关于图片自适应 image标签中添加mode属性: 默认值:scaleToFill ---- 不保持纵横比例缩放图片,使图片的宽高完全拉伸至填满image标签 aspectFit ---- ...
【Flutter】Image 组件 ( 加载网络图片 | 加载静态图片 | 加载本地图片 | path_provider 插件 )
文章目录一.加载网络图片二.加载静态图片三.加载本地图片四.完整代码示例五.相关资源一.加载网络图片参考 [Flutter]Image 组件 ( Image 组件简介 | Image 构 ...
php本地怎么接受小程序图片,怎么把本地图片当作小程序背景
我们知道在微信小程序中是不能直接给view设置本地图片的.那么我们怎么解决这个问题呢? (学习视频分享:编程入门) 解决方法如下: 1.使用网络图片 2.使用base64格式 3.使用image来装载 ...
ue4加载本地图片_UE4 读取本地图片
我这里,不能将图片全放工程之中,需要在外部在加载图片资源,再来使用 1.通过本地图片路径,获取图片,并将其数据转为uint类型的数组 #pragma region 通过本地图片转换成UTexture2 ...
JAVA 把base64图片数据转为本地图片
/*** 替换html中的base64图片数据为实际图片* @param html* @param fileRoot 本地路径* @param serRoot 服务器路径* @return*/publ ...
uni-app 多端本地图片转base64 本地图片转base64
文章目录 uni 适配多端本地图片转base64 函数多端转换统一函数使用 h5本地图片转base64 app本地图片转base64 微信小程序本地图片转base64 uni 适配多端本地图片 ...
Markdown插入图片详细例子(本地图片，网络图片，base64) Windows
网上一番搜索,领略到基本所有回答,都是一样的,简简单单的介绍. 而且,TMD,插入图片答案的本地路径,都是回答的是Linux或Mac OS系统的路径,诸如:/user/desktop/doge.png ...
iOS开发（OC）——图片浏览器（本地图片和网络图片都可以用）
iOS开发交流群:301058503 Demo地址:https://github.com/liumude/PictureScan.git 使用(具体请看Demo) PictureSacnViewCon ...

react 引入远程动态图片和引入本地图片

1. 引入本地图片

2.引入动态的图片地址

2.1.直接使用传递过来的地址

2.2. 使用跟本地对应的动态图片名称

通过require.context()实现引用

通过直接使用public文件夹下的图片

react 引入远程动态图片和引入本地图片相关推荐

最新文章

热门文章

react 引入远程 动态图片 和 引入本地 图片

1. 引入本地图片

2.引入动态的图片地址

2.1.直接使用传递过来的地址

2.2. 使用跟本地对应的动态图片名称

通过require.context()实现引用

通过直接使用public文件夹下的图片

react 引入远程 动态图片 和 引入本地 图片相关推荐

最新文章

热门文章

react 引入远程动态图片和引入本地图片

react 引入远程动态图片和引入本地图片相关推荐