react前端显示图片_react.js - 关于react引用本地静态资源图片的问题

问题

1.我在render里面引用本地静态资源图片，但是页面不显示。

2.我尝试使用require引用，但是变成绝对路径且没有域名

想咨询一下大家有没有遇到这种问题，webpack配置我感觉也没有问题啊

求教！

解决方案

你的图片地址并不是一个URL，而是一个本地图片，所以你在webpack中配置的不应该使用url-loader，而是要用file-loader. 另外切换file-loader后，你的React组件内的img只需要简单写真实图片路径就好了，不需要require在包裹一层

PS：为什么不用七牛存储图片服务？除非你的软件限制在内网环境，不然我不建议在工程内创建图片文件夹来引用图片。不过如果是APP内拦截图片资源提速考虑，当我没说。。。

补充：我又翻了一下文档，貌似url-loader的用法和file-loader是一样，是我自以为是误解了url-loader的用法。我刚写的demo使用webpack3+file-loader处理图片是没问题的。所以你可以尝试在img中的require删除试试。

扫一扫关注IT屋

微信公众号搜索 “ IT屋 ” ，选择关注与百万开发者在一起

react前端显示图片_react.js - 关于react引用本地静态资源图片的问题相关推荐

uniapp微信小程序无法使用本地静态资源图片，背景图在真机不显示方法
前言首先要说明,使用HBuilder或者vs Code工具开发的时候,在微信开发者工具调试的时候,我们使用本地图片是OK的,但是一旦放到真机上调试的时候,图片就显示不出来. 先看uniapp官网对背 ...
vue-cli3.0 vue打包部署非根目录时，静态资源图片路径错误
项目中需要把应用部署在子路径下,所以就需要修改vue配置和NGINX配置以子路径为market为例.eg.http://localhost:8000/market/ 1.第一步修改vue.conf ...
Spring3中js/css/jpg/gif等静态资源无法找到（No mapping found for HTTP request with URI）问题解决...
最近项目中使用到Spring3,在感叹Spring3注解配置清爽的同时竟然出现了这个不和谐的事情,实在无法忍受问题:部署项目后程序加载或用浏览器访问时出现类似的警告,2011-01-19 10:5 ...
Spring3中js/css/jpg/gif等静态资源无法找到（No mapping found for HTTP request with URI）问题解决--转载...
原文地址:http://www.programgo.com/article/96083031845/ 最近项目中使用到Spring3,在感叹Spring3注解配置清爽的同时竟然出现了这个不和谐的事情, ...
[vue] 怎么解决vue打包后静态资源图片失效的问题？
[vue] 怎么解决vue打包后静态资源图片失效的问题? 上面蛮多回答感觉像开玩笑似的,静态资源图片失效分几种情况. 1.确定线上环境是否在根路径上,配置资源根目录,vue-cli2 和 vue-cl ...
Spring3中js/css/jpg/gif等静态资源无法找到（No mapping found for HTTP request with URI）问题解决(转)...
最近项目中使用到Spring3,在感叹Spring3注解配置清爽的同时竟然出现了这个不和谐的事情,实在无法忍受问题:部署项目后程序加载或用浏览器访问时出现类似的警告,2011-01-19 10:52 ...
引入react文件报错_react.js引入router文件后报错
我是一个初学者,目前遇到一个问题,没能定位问题的原因和解决从router.js文件导出 RouteConfig 我的路由文件如下:router.js import React from 'react ...
react前端ui的使用_使用React Morph变形UI过渡
react前端ui的使用 Love them or hate them, animations in modern web design are probably here to stay. Unli ...
电商静态资源图片等存储方式以及CDN加速
参考链接:http://www.cnblogs.com/wangtao_20/p/3440570.html 以下为简略版商品图片,用户上传的头像,其他方面的图片.目前业界存储图片有两种做法: 1. ...
glide默认的缓存图片路径地址_手写一个静态资源中间件，加深了解服务器对文件请求的缓存策略...
上一篇文章<详解页面静态资源的缓存策略,搞懂强缓存和协商缓存再做性能优化>我们从理论上介绍了浏览器和服务器是如何对静态资源做缓存的,这篇文章我们把它做成一个node服务器的静态资源中间件. ...

react前端显示图片_react.js - 关于react引用本地静态资源图片的问题

react前端显示图片_react.js - 关于react引用本地静态资源图片的问题相关推荐

最新文章

热门文章