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. Mac安装最新tensorflow遇到的坑,记录下方便后人

    之前其他mac电脑安装tensorflow时候一切顺利,一行命令sudo pip install tensorflow就高搞定了,但是今天在新mac上安装tensorflow时候出现了一个bug,搞了 ...

  2. WPF 跨应用程序域的 UI(Cross AppDomain UI)

    为自己写的程序添加插件真的是一个相当常见的功能,然而如果只是简单加载程序集然后去执行程序集中的代码,会让宿主应用程序暴露在非常危险的境地!因为只要插件能够运行任何一行代码,就能将宿主应用程序修改得天翻 ...

  3. DispatcherServlet的初始化(二)

    DispatcherServlet的初始化在springmvc的启动中有讲过,这一篇在上一篇的基础上接着讲.DispatcherServlet作为springmvc的前端控制器,还需要初始化其他的模块 ...

  4. python: how to delete a given item if it exist in the list

    a.remove('b') if thing in some_list: some_list.remove(thing)

  5. java 并发synchronized使用

    从版本1.0开始,java中每个对象都有一个内部锁,如果一个方法用synchronized修饰,那么对象的锁将保护整个方法,也就是说要调用该方法,线程必须获得内部的对象锁 换句话说 public sy ...

  6. Hyper-V 手动导入虚机配置实例(转载)

    原文转载:http://blog.51cto.com/bobzy/980241 Hyper-V提供了很方便的虚机导入和导出功能.平时假如我们想导出虚机,先选中虚机,然后鼠标右键在出现菜单列表中选中“导 ...

  7. table样式的下拉框(angularjs)

    前言 虽然使用的技术比较老了,但是思想却还是适用于现在的vue等框架. 一:实现的样式 二:实现包括的功能点 1:下拉框内容是表格,类似于一个弹窗 表格内容最多六行,超出的显示滚动条,表头固定,可滚动 ...

  8. ubuntu 12.04lts 安装mysql ,并通过QT连接

    安装server$ sudo apt-get install mysql-server 安装驱动 $ sudo apt-get install libqt4-sql-mysql $ dpkg --li ...

  9. ecmall类关系图(转)

  10. angular先加载页面再执行事件,使用echarts渲染页面

    剧情重现: 在一个页面中有多个小模块,这几个模块是可以拖动调顺序的,并且其中有两个模块使用了echarts渲染, 调整顺序angular插件有成熟的解决方案angular-sortable,https ...