react踩坑1--图片加载不出问题

最新推荐文章于 2024-05-15 15:49:37 发布

我就是派大星

最新推荐文章于 2024-05-15 15:49:37 发布

阅读量1.6k

点赞数

文章标签： reactjs javascript html html5 node.js

本文链接：https://blog.csdn.net/qq_41890576/article/details/107423769

版权

有一次用creat-react-app在做项目时,我引用的图片地址http/https，而不是本地的，然后问题就来了，我运行项目时，图片并没有加载出来，然后我去它官网看一下，可能浏览器缓存了，我重新刷新自己的服务器，项目上的图片就可以看到。但是这不是根本解决办法，后来在public下的index.html加入这个就好了。
<meta name="referrer" content="no-referrer">
记得要加在head里面

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

我就是派大星

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
7
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

React-reactlazyload懒加载你的组件图片和其它与性能相关的任何东西

08-14

react-lazyload - 懒加载你的组件、图片和其它与性能相关的任何东西

关于React项目中，require无法动态加载本地图片

05-19

4131

目录1. React加载本地图片的方法1.1 方法一1.2 方法二2. 关于使用require无法加载图片的解决方案2.1 案例一2.2 案例二3.参考文献 1. React加载本地图片的方法 1.1 方法一第一种方法相信大多数人用的比较多，而且出现无法加载图片的错误比较少。 import user from '../img/user.png' <img src={user} alt="" /> 1.2 方法二第二种方法也是比较常用，当时使用require这个方法读取本地图片出现错误的概率

7 条评论您还未登录，请先登录后发表或查看评论

react 图片没有加载出来的问题

热门推荐

zhengjie0722的博客

12-21

3万+

最近在用create-react-app 脚手架自己写一个小项目，遇到了很多坑，其中有一个就是React 引用本地图片的问题，我的需求是，图片的路径写在json文件里，需要从后台读取json文件，然后读取到图片的路径，在前端渲染。那么问题来了，es6不支持在标签内直接写图片的路径，即：这种格式是不支持的。在网上看了很多博客，总结下以下几个加载的方法，当然，这种是在图片不多的情况下可以采用。

react-infinite-loader:React无限加载器组件

05-14

npm install react-infinite-loader --save 用法在列表中的项目下方添加无限加载程序组件。在加载程序处于查看状态时，将触发onVisited事件，以供您重新加载更多数据。查看以获取更多信息。 import ...

react-native-spinkit：React Native的动画加载指示器集合

02-28

react-native-spinkit 动画加载指标集合React本机端口。使用漂亮的微调器加载您的IAP :backhand_index_pointing_down: 预览入门 npm install react-native-spinkit@latest --save对于RN <0.40支持，请使用...

react中请求网络图片加载不出来的问题解决

J_aSON_的博客

07-25

1648

React中img加载图片时遇上了403 我在做项目的时候遇上了这么一个问题，那就是在React项目中，使用img标签加载网页的图片的时候，居然遇上了403，但是直接把网页图片的地址放到地址栏时浏览器是可以成功加载的，但是放到React项目中使用img加载网页图片的时候就会403，如果遇上了这种情况，以下是解决办法：在index.html文件中加上 <meta name="referrer" content="no-referrer"> 下面是转载的一篇技术介绍 Referrer Poli

react-native-storybook-loader：用于react-native-storybooks的自动故事加载器

02-05

React Native故事书加载器一个用于将故事动态导入CLI。目的在将故事书用于React Native时，我反复发现自己手动创建了一个包含所有故事导入的文件。...yarn add react-native-storybook-loader -D 快速开始使

关于react引入图片无法显示的问题（不报错）

cjcora的博客

06-09

5926

关于react引入图片无法显示的问题（不报错）问题在UI组件里面使用添加图片，直接用src给出路径在确定路径无错后，开始以为是antd design组件添加图片的问题。后面才发现react 两种解决方法：第一种：用require（）方法（推荐）第二种：将图片路径由import引入，再给src ...

React 引入img 图片不显示

臧小川的博客

09-23

2991

通过img标签的src属性引入图片时，相对路径经过页面渲染后变成了相对于项目的根目录路径。 import React from 'react' export default function App () { return ( <div> <img src="./1632363376(1).png" alt="" /> </div> ) } 两种解决方案 1：import 引入 import React from 'react' i

react 中引入图片不显示问题

杜杜的博客

12-17

3587

通常我们引入图片 <img src='图片路径' alt=''/> 在React 中我们使用上面的写法引入会图片加载不出来，不显示。所以我们在react中使用以下两种方式去引入图片：组件方式引入： import ImageOne from '图片路径'; //直接当成组件去使用 <img src={ImageOne } alt='' /> reauire 直接引入图片地址：　<img s rc={ require('图片路径')} alt='' />

react之引用图片无法显示（地址没问题）

菜菜鸟的博客

04-15

8592

问题：react无法渲染img 原因：create-react-app只支持public文件夹下的图片读取，src下的图片读取需要以下方式： <img src={[require("../assets/img/2x.png")]} alt=""/> 解决：将图片导入public文件夹即可 ...

react 写移动端H5页面引用本地图片且路径正确，但是图片无法正确展示（会展示成默认图片）

hzxOnlineOk的博客

05-23

829

错误的图片如下： Card.js（这边直接在img标签写的相对路径，但是无法正确显示） import React from 'react' import styles from './card.less' export default class extends React.Component { constructor(props) { super(props) this.state = { // isShow: false, } ..

react-lazy-load-image-component-demo:react-lazy-load-image-component 演示

05-30

React 延迟加载图片组件演示这是react-lazy-load-image-component NPM 包的演示。它既不打算在现实生活中使用，也不是好的编程实践的一个例子，而是要给出一个如何使用包react-lazy-load-image-component及其道具...

React图片懒加载

qq_41672008的博客

02-07

2933

React图片懒加载话不多说了，创建一个LazyLoad.js的React组件，然后将下面的代码复制过去： import React from 'react' // import './lazyload.css' // threshold const threshold = [0.01] class LazyLoad extends React.Component{ construc...

创建React项目时，出现create-react-app : 无法加载文件问题解决~~~~

qq_16733389的博客

07-06

1185

问题描述： create-react-app : 无法加载文件 C:\Users\cxk\AppData\Roaming\npm\create-react-app.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。所在位置行:1 字符: 1 我们打开Windows PowerShell 并且以管理员身份运行打开了命令行之后,输入set-Exec

在标签中用@引入图片出不来得解决方法

m0_64707449的博客

05-30

519

在标签中用@引入图片出不来得解决方法如下：只需要在<img src="`@/assets/cat.png"> @前面加一个~即可

create-react-app 中使用antd-mobile 无样式以及按需加载；按照官网设置完config-overrides.js报错The "injectBabelPlugin" helper

simeng-han的博客

04-14

2741

creat-react-app 创建完项目后要引用antd-mobile，但是需要单独引入组件和样式，比较麻烦；看官方的文档进行设置，设置完config-overrides.js 后运行报错： The “injectBabelPlugin” helper has been deprecated as of v2.0. You can use customize-cra plugins in rep...