react之本地图片引用

<img src="../images/photo.png"/>

这种写法在react中是不支持的,所以引用本地图片需要用import或者require。

方法一:

import imgURL from './../images/photo.png';
...
<img src={imgURL } />

方法二:

<img src={require('./../images/photo.png')} />

当图片名称存储在json中的时候,require不能写变量,import from后面也不能写变量。所以就出问题了。

目前我的解决方法,把require里面的值前面加一个字符串。

const  img = require('../image/'+this.props.data.imgName);
<img src={img}/>

钻研不易,转载请注明出处。

react之本地图片引用的更多相关文章

  1. Flutter 自定义列表以及本地图片引用

    前言 上篇关于Flutter的文章总结了下标签+导航的项目模式的搭建,具体的有需要的可以去看看Flutter分类的文章,这篇文章我们简单的总结一下关于Flutter本地文件引用以及简单的自定义List ...

  2. JSP中<img>标签引用本地图片

    问题描述: jsp页面中<img>标签如何读取本地文件夹中的图片. 问题起因: 由于上传图片至本地文件夹中,图片路径为: D:/upload/file/image/img.jpg 所以将这 ...

  3. Markdown引用本地图片语法

    Markdown引用本地图片语法 markdown引用图片标准方式如下: ![Alt text](/path/to/img.jpg) 测试markdown文本如下: # 测试相对路径图片 ![Alt ...

  4. React Native之图片保存到本地相册(ios android)

    React Native之图片保存到本地相册(ios android) 一,需求分析 1,react native保存网络图片到相册,iOS端可以用RN自带的CameraRoll完美解决,但是andr ...

  5. TinyMCE的使用(包括汉化及本地图片上传功能)

    TinyMCE我就不多介绍了,这是下载地址:https://www.tinymce.com/download/ 下载下来是英文版,要汉化也很简单.首先去网上随便下载个汉化包,然后把汉化包解压后的lan ...

  6. HighChats报表使用C#mvc导出本地图片

    最近工作使用了HighCharts,要用到保存成图片功能,但是是内部使用,不允许连接外网,于是就学习了下highcharts生成本地图片. highcharts有一个exporting.js来负责导出 ...

  7. KindEditor上传本地图片在ASP.NET MVC的配置

    http://www.cnblogs.com/upupto/archive/2010/08/24/1807202.html 本文解决KindEditor上传本地图片在ASP.NET MVC中的配置. ...

  8. 利用cropper插件裁剪本地图片,然后将裁剪过后的base64图片上传至七牛云空间

    现在做的项目需要做一些图片处理,由于时间赶急,之前我便没有处理图片,直接将图片放在input[type=file]里面,以文件的形式提交给后台,这样做简直就是最低级的做法,之后各种问题便出来了,人物头 ...

  9. Hexo中添加本地图片

    First 1 把主页配置文件_config.yml 里的post_asset_folder:这个选项设置为true 2 在你的hexo目录下执行这样一句话npm install hexo-asset ...

随机推荐

  1. git rebase 的作用

    git rebase,顾名思义,就是重新定义(re)起点(base)的作用,即重新定义分支的版本库状态.要搞清楚这个东西,要先看看版本库状态切换的两种情况: 我们知道,在某个分支上,我们可以通过git ...

  2. Linux服务器运行环境搭建(二)——Redis数据库安装

    官网地址:http://redis.io/ 官网下载地址:http://redis.io/download 1. 下载Redis源码(tar.gz),并上传到Linux 2. 解压缩包:tar zxv ...

  3. Atcoder Beginner Contest 118

    A: B +/- A 签到题. B: Foods Loved by Everyone 签到题. C: Monsters Battle Royale 怪物的血量一直两两相减,类似于辗转相减法. 可以证明 ...

  4. POJ2728 Desert King 【最优比率生成树】

    POJ2728 Desert King Description David the Great has just become the king of a desert country. To win ...

  5. .NET Standard / dotnet-core / net472 —— .NET 究竟应该如何大小写?

    本文将解释在 .NET 技术栈中各种不同使用方式下 N E T 三个字母何时大写何时小写:前面的 “.” 什么时候加上,什么时候去掉,什么时候又使用 “dot”.   .NET 在技术文档中 如果你阅 ...

  6. RF自定义系统关键字

    如果您准备学习Python,船长在这里给大家推荐几个学习Python的好地方:   1.廖雪峰官网 http://www.liaoxuefeng.com/wiki/001374738125095c95 ...

  7. Sprint第一个冲刺(第六天)

    一.Sprint介绍 今天我们完成了修改注册和登录直接用滚轮选择,主界面加入轮播图 . 实验截图: 主界面加入轮播图: 任务进度: 二.Sprint周期 看板: 燃尽图:

  8. CentOS 6.8 源码安装mysql 5.6

    一:卸载旧版本 rpm -qa | grep mysql rpm -e mysql #普通删除模式 rpm -e --nodeps xxx(xxx为刚才的显示的列表) # 强力删除模式,如果使用上面命 ...

  9. centos安装 node.js

    curl --silent --location https://rpm.nodesource.com/setup_8.x | sudo bash - yum clean all yum makeca ...

  10. 嵌入式视频采集编程思路(Video 4 Linux)-转

    转自:http://zyg0227.blog.51cto.com/1043164/271954 1.  linux 内核有video for linux简称V4L.V4L是Linux影像系统与嵌入式影 ...