精华内容
下载资源
问答
  • ES6 React 组件引用本地图片问题

    万次阅读 2017-12-21 13:48:59
    最近在用create-react-app 脚手架自己写一个小项目,遇到了很多坑,其中有一个就是React 引用本地图片的问题,我的需求是,图片的路径写在json文件里,需要从后台读取json文件,然后读取到图片的路径,在前端渲染。...

    最近在用create-react-app 脚手架自己写一个小项目,遇到了很多坑,其中有一个就是React 引用本地图片的问题,我的需求是,图片的路径写在json文件里,需要从后台读取json文件,然后读取到图片的路径,在前端渲染。那么问题来了,es6不支持在<img />标签内直接写图片的路径,即:

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

    这种格式是不支持的。在网上看了很多博客,总结下以下几个加载的方法,当然,这种是在图片不多的情况下可以采用。

    (1)import 方法:


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

    (2)require方法

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

    这种方法需要注意的是,require里只能写字符串,不能写变量。


    这两种办法可以解决图片不多,在前端直接加载图片路径的问题。那么,假设需要从数据库中读取图片的路径,require不能写变量,import from后面也不能写变量,那么该怎么办呢,现在也假设两种情况。

    (1)图片了不大的情况 且知道图片顺序的情况下

    json:

    [
      {
        "name":'img1'
        "img":"img1",
        "url":""
      },
      {
        "name":"img2",
        "img":"img2",
        "url":""
      },
      {
        "name":"img3",
        "img":"img3",
        "url":""
      }
    ]


    react:

    import img1 from'./../images/img1.png';
    import img2 from'./../images/img2.png';
    import img3 from'./../images/img3.png';
    
    const imgsArr = [img1,img2,img3];
    
    render(){
        return(
            <div>
                {
                    imgsArr.map(function(name){
                        return(
                            <img src={name} />
                        )
                    }) 
                }
            </div>
        )
    }

    这个只能满足图片量不大,且知道图片加载顺序的情况下。

    (2)图片量很大,且图片顺序需与json文件的name一致

    这种情况下,看了网站上一个博客,可以同时import 一个文件夹下面的图片路径放到一个数组arrIMGURL里,就想到了一个方法,假设全部加载到图片里,在后台json文件的"img"属性里写该图片的名字a,在渲染的时候,遍历存放图片路径数组,假设arrIMGURL包含a,则渲染该图片。代码如下:

    1、全部加载图片路径

    const requireContext = require.context("./../img/project",true, /^\.\/.*\.png$/);
    const projectImgs = requireContext.keys().map(requireContext);
    2、渲染

        createContent(){
            var _this = this;
            for (var i = 0;i<this.dataSource.length;i++){
                var columns = [];
                var imgURL;
                for (var j = 0; j < projectImgs.length;j++){
                    if(projectImgs[j].indexOf(_this.dataSource[i].img) > 0){
                        imgURL = projectImgs[j];
                    }
                }
                columns.push(<div className="projectImg"><img src={imgURL} alt=""/></div>);
                columns.push(<a href={_this.dataSource[i].url}>{_this.dataSource[i].name}</a>);
                result.push(<div className="projectContent">{columns}</div>);
    
            }
            return result;
        };






    展开全文
  • react组件中引用本地图片

    千次阅读 2018-11-20 10:03:01
    使用create-react-app...但是在ES6中不支持img标签中直接写图片路径。 使用import引入 import img1 from '../assets/img/img1.jpg' //引入 ··· &amp;lt;img src={img1} /&amp;gt; //使用 使用requir...

    使用create-react-app脚手架写项目,遇到一个问题react引用本地图片。从JSON文件中,读取图片路径地址,在前端渲染。但是在ES6中不支持img标签中直接写图片路径。

    1. 使用import引入
    import img1 from '../assets/img/img1.jpg'   //引入
    ···
    <img src={img1} />   //使用
    
    1. 使用require引入
    <img src={require('../assets/img/img1.jpg')} />
    这种方式只能够使用路径地址不能够使用变量。
    
    1. 加载全部图片路径
    const requireContext = require.context("../assets/img",true, /^\.\/.*\.png$/);
    const projectImgs = requireContext.keys().map(requireContext);
    在渲染的时候遍历这个数组,如果存在这个数据,就选择渲染。
    
    展开全文
  • cocos creator学习18——本地文件读写

    千次阅读 2018-05-17 19:53:18
    jsb将整个C/C++ 导出的绑定在jsb里,但jsb 不支持h5。而且fileUtils是本地文件读写的一个工具类,全局只有一个实例; API 功能说明 jsb.fileUtils.isDirectoryExist(path) 判断路径是否存在 ...

    jsb.fileUtils常用API

    jsb将整个C/C++ 导出的绑定在jsb里,但jsb 不支持h5。而且fileUtils是本地文件读写的一个工具类,全局只有一个实例;

    API 功能说明
    jsb.fileUtils.isDirectoryExist(path) 判断路径是否存在
    jsb.fileUtils.createDirectory(path) 创建一个路径
    jsb.fileUtils.getDataFromFile(path) 获取二进制数据,返回一个Uint8Array文本对象
    jsb.fileUtils.writeDataToFile(data,path) 写二进制数据,返回一个Uint8Array 对象
    jsb.fileUtils.writeStringToFile(data,path) 写文本文件,返回一个data String对象
    jsb.fileUtils.getStringFromFile(path) 获取文本数据,返回一个data String对象
    jsb.fileUtils.removeFile(path) 删除掉该路径下的文件
    jsb.fileUtils.getWritablePath() 获取文件的可写目录
    展开全文
  • 2.项目是用create-react-app构建的,路由用的react-router-dom,打包后路由跳转了,会报错 注: 1)BrowserRouter 需要服务端去配置支持一下, 访问格式:xxx/home 2)HashRouter 访问格式:xxx/#/home ...

    React-打包后本地打开的问题

    1.首页路径的问题,找到package.json,设置“homepage:’.’”
    在这里插入图片描述
    2.项目是用create-react-app构建的,路由用的react-router-dom,打包后路由跳转不了,会报错
    注:

    	1)BrowserRouter  需要服务端去配置支持一下,
    		访问格式:xxx/home
    	2)HashRouter 
    		访问格式:xxx/#/home		
    

    这里我直接用HashRouter了,本地可以打开index.html看到东西
    在这里插入图片描述
    import一下HashRouter,然后嵌套一下就行了

    展开全文
  • 未找到路径“D:\”的一部分

    千次阅读 2013-12-30 10:05:39
    .Text程序在本地运行一直好好的,上传到服务器后相册一直不能正常使用,找了一下原因,原来是服务器上居然不能用程序创建目录,也就是对Directory.CreateDirectory不支持,而上传文件一点问题没有,本地也没问题,太...
  • .Text程序在本地运行一直好好的,上传到服务器后相册一直不能正常使用,找了一下原因,原来是服务器上居然不能用程序创建目录,也就是对Directory.CreateDirectory不支持,而上传文件一点问题没有,本地也没问题,太...
  • 未找到路径“D:/”的一部分 的问题解决 .Text程序在本地运行一直好好的,上传到服务器后相册一直不能正常使用,找了一下原因,原来是服务器上居然不能用程序创建目录,也就是对Directory.CreateDirectory不支持,而...
  • 三、 您的 MySQL 数据库账号应当拥有 CREATE、DROP、ALTER 等执行权限,同时文件空间需低于 100M,数据库 空间低于5M,通常您的虚拟空间都会满足这个条件,以满足包括ShopNC电商门户系统在内的绝大多数 网络...
  • 写文章部分目前仅支持插入网络图片,无法从本地上传图片(已解决) 手机端浏览文章页面会出现代码自动换行问题,便于浏览过程(已解决) 未来需增加的功能 增加文章分享至QQ、微信、微博中功能 用户收藏文章...
  • 正常的Image图片类实例化的时候都需要使用本地的虚拟路径而不能使用URL,如果使用URL就会出现 不支持 URI 格式 这样的问题,正确的写法如下: HttpWebRequest request = (HttpWebRequest)WebRequest.Create...
  • 远程服务器软件系统不算新,数据库是SQL Server 2005.本地开发基本是用新的软件系统.数据库采用SQL Server 2008. 这样在用远程服务器SQL 2005选择附加SQL 2008的...不支持降级路径。无法打开新数据库 XXX 。CREATE DA...
  • 肥皂 Node.js的SOAP客户端和服务器。 该模块使您可以使用SOAP连接到Web服务。 它还提供了一个服务器,使您可以运行自己的SOAP服务。... 还支持本地文件系统路径。 var soap = require ( 'soap' ) ; var ur
  • <br />远程服务器软件系统不算新,数据库是SQL Server 2005.本地开发基本是用新的软件...不支持降级路径。无法打开新数据库 XXX 。CREATE DATABASE 中止。 (Microsoft SQL Server,错误: 948)” 有没有办法
  • 答:由于我使用的是AdoQuery作为数据集载体,所以无需更改为其他控件,现有的本地数据库程序也可以非常容易的改造为支持分布式数据库。 这个东东稳定吗? 答:经自己长期做小白鼠广泛的实际应用实践,发现方便,稳定...
  • A:需要在终端执行cd转换文件路径命令退回到Desktop,然后执行pod setup命令更新本地spec缓存(可能需要几分钟),然后再搜索就可以了 Q:拍照后照片保存失败 A:请参考issue481:...
  • Microsoft SQL Server 2005 Express Edition SP3

    热门讨论 2012-03-04 10:55:14
    出现该错误的原因是命令 shell 脚本不支持路径变量中包含的括号。在将 32 位组件安装到 64 位计算机的 Windows (WOW64) 32 位子系统中的 Windows 时可能会出现该错误。例如,下列路径值为“C:\Program Files (x86)\...
  • 搜狗浏览器 3.0.0.2992

    2011-09-28 17:18:12
    3.修复扩展接口window.create参数错误的问题。 4.修改状态栏加速器的显示。 搜狗高速浏览器3.0j更新内容: 1.尝试修复加速和QQ空间兼容问题。 2.修复网页消息提醒中对单引号的转义显示。 搜狗高速浏览器3.0i...
  • strFileName:文件本地路径,如c:\\11.doc dwFileFormat: 文件格式 dwFileFormat的数值为: Excel: Type enum XlFileFormat { xlAddIn = 18, xlCSV = 6, xlCSVMac = 22, xlCSVMSDOS = 24, xlCSVWindows = 23,...
  • mssql 微软 只能能运行在windows平台,体积比较庞大,占用许多系统资源, 但使用很方便,支持命令和图形化管理,收费。 中型企业 Mysql 甲骨文 是个开源的数据库server,可运行在多种平台, 特点是响应速度特别快,...
  • 说明:设置appsetting.json日志路径为LogPath(/var/fapcore/logs),设置附件路径为(/var/fapcore/annex) sudo docker run --name fapcorehcm -d -p 5000:80 -p 5001:443 -v /etc/localtime:/etc/localtime -v /...
  • 假如你不得已非要用centos7 (有的语言可能不支持,但是某些机架式服务器的Raid卡Ubuntu不认只能装CentOS),可以用下面脚本快速安装OJ: wget ...
  • PostgreSQL必备参考手册--详细书签版

    热门讨论 2013-02-04 13:28:35
    PostgreSQL不仅包含了现代RDBMS所必需的触发器、规则和函数等,还支持多版本并发控制(MVCC)及自定义函数等机制,PostgreSQL更是提供了广泛的API访问解决方案,包括ODBC、JDBC、C、Perl、PHP及Python等。...
  • 说明: 为以下各项指定命名约定, 包括日期和星期的编号, 默认日期格式, 默认小数点字符和组分隔符, 以及默认的 ISO 和本地货币符号。可支持的区域包括美国, 法国和日本。有关所有区域的信息, 请参阅 Oracle8i ...
  • "/mnt/sdcard/testapk.apk", //这是保存到本地路径 new AjaxCallBack() { @Override public void onLoading(long count, long current) { textView.setText("下载进度:"+current+"/"+count); } @...
  • 67. regsvr32 /u zipfldr.dll------取消ZIP支持 68. ntbackup-------系统备份和还原 69. narrator-------屏幕“讲述人” 70. ntmsmgr.msc----移动存储管理器 71. ntmsoprq.msc---移动存储管理员操作请求 72. ...

空空如也

空空如也

1 2 3
收藏数 58
精华内容 23
关键字:

本地不支持create路径