使用create-react-app脚手架写项目，遇到一个问题react引用本地图片。从JSON文件中，读取图片路径地址，在前端渲染。但是在ES6中不支持<img />中直接写图片路径。
import img1 from '../assets/img/img1.jpg' //引入
···
<img src={img1} /> //使用
<img src={require('../assets/img/img1.jpg')} />
这种方式只能够使用路径地址不能够使用变量。
const requireContext = require.context("../assets/img",true, /^\.\/.*\.png$/);
const projectImgs = requireContext.keys().map(requireContext);
在渲染的时候遍历这个数组，如果存在这个数据，就选择渲染。
使用create-react-app脚手架写项目，遇到一个问题react引用本地图片。从JSON文件中，读取图片路...
引用本地图片 导入图片路径 直接获取图片 导入背景图 css 中用正常 css 语法 组件中操作 style 属性
最近在学React，遇到了个比较神奇的坑，就是引入本地图片的问题。图片文件是放在public/assets文件夹中...
用于显示多种不同类型图片的 React 组件，包括网络图片、静态资源、临时的本地图片、以及本地磁盘上的图片（如相册...
一、前言 vant中的van-image组件的src参数默认为图片的网络链接： 当要引用本地的图片时，直接写图片的...
引用本地图片 第一种导入图片路径 第二种直接获取图片 如果是背景图的话操作style ${} 为字符串模板,要用反...
前端开发,我们都知道引用一张图片的时候,我们就直接使用img标签,加上src属性就可以了,但是在react中这样走...
一. 简介 一个用于显示多种不同类型图片的React组件，包括网络图片、静态资源、临时的本地图片、以及本地磁盘上的...
React Native可以通过Image组件显示图片。既可以加载网络图片,也可以加载本地资源图片。接下来，我们介...
实现步骤： 创建React组件项目； 创建测试项目并引用组件； 发布React组件到npm上； 一、创建React...
本文标题：react组件中引用本地图片
本文链接：https://www.haomeiwen.com/subject/whltqqtx.html
网友评论