问题标签 [react-image]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
0 回答
747 浏览

reactjs - 图像在反应应用程序中旋转

这是我的代码

我正在使用 react-images、react-photo-gallery 库。当某些图像在浏览器中可见时,它们会被旋转。但是当它们保存在文件夹中时它们很好。它们都是用手机点击的,但其中一些只是旋转。

请帮我解决这个问题!

0 投票
1 回答
1174 浏览

react-native - React Native 'require' 语句在映射中使用时解析为数字

我知道 require('') 需要一个静态字符串,但是当我尝试在包装中映射值以供稍后在代码中使用时

它们解析为整数,以下记录数字 6

所以我无法加载这样的图像

memberStatus 是一个字符串值,数据和图像路径是正确的,因为我可以通过直接在 render() 中使用每个源路径创建一个单独的图像来使其工作,然后由 userData 有条件地将其中一个放入 return() .

不过,我想另辟蹊径,因为它需要的行数要少得多,维护起来也容易得多。

0 投票
1 回答
1247 浏览

reactjs - 反应图像映射器覆盖某些区域的突出显示

我正在使用 npm 包 react-image-mapper 来映射酒店平面图图像上的某些区域。现在我想在已经预订的房间上添加一个永久的红色突出显示,并在悬停时突出显示其他颜色不同的房间。

react-image-mapper 可以选择更改组件的 fillColor 属性。但它在所有领域都发生了变化。我只想为某些区域更改它。有没有办法在 react-image-mapper 中实现这一点?

0 投票
1 回答
1666 浏览

reactjs - 反应中的图像加载

我正在上传更少的代码,因为我认为它已经足够了
询问是否需要更多来查找错误

我正在尝试导入图像。
当我使用import('./../images/thumbnails/g.png)它时,它运行成功,但是当我传递与道具相同的值并尝试导入它时,它通过错误(找不到模块)。
我记录了这些值,所有的结果都是真的,意味着字符串和道具字符串是相同的,那么为什么我会得到 2 种不同的行为?

0 投票
1 回答
507 浏览

javascript - 为 Lightbox react-images 制作一个合适的 onClickThumbnail

所以我正在使用 react-images 库设置一个 Lightbox 组件,并且似乎一切正常。除了一件事。

我有缩略图渲染,但我无法创建正确的 onClick 函数。这是因为我不知道如何获取我点击的缩略图的索引。如果我有缩略图索引,这将不是问题。

这是我当前的灯箱组件配置:

如何知道我单击的缩略图的索引,以便将其设置为 currentImage?

谢谢!

0 投票
0 回答
1206 浏览

reactjs - react-slick 与 react-image-zoom 冲突图像缩放不起作用

我想要使​​用像电子商务产品这样的多滑块缩放图像,但是 react-image-zoom 与 react-slick 冲突

只有最后一张幻灯片图像缩放工作

有人请帮忙,谢谢

0 投票
0 回答
61 浏览

reactjs - 图像发生但未出现在本机反应中

当我尝试将图像添加到我的第一个反应本机应用程序时,即使它发生也不会出现。

我确实喜欢文档中所说的但问题仍然存在

这是我的代码:

我对本地图像使用了 require ,也是一样的:

0 投票
0 回答
1813 浏览

react-native - 通过单个 HTTP/2 连接响应 Native Image 请求

我们每个屏幕都有许多 React Native组件渲染,并且由于许多同时的 http 请求而<Image>目睹了性能问题。打开和关闭连接的成本很高,同时连接过多可能会遇到导致超时的限制。

HTTP/2 具有多路复用功能,允许客户端和服务器之间的多个请求和响应消息通过单个连接而不是多个连接同时运行,从而缩短了页面加载时间。

CloudFront 默认支持 HTTP/2、HTTP/1.1 和 HTTP/1,具体取决于客户端在请求标头中发送的版本。

我们注意到,我们的 React Native 应用程序正在发送 HTTP/1.1 作为<Image>. 与流行的应用程序不同,我们为每个 GET 打开和关闭一个连接。我们如何确保 React Native Image 请求使用 HTTP/2 并共享连接?

(我们的图像都共享同一个 CloudFront 域。)

在此处输入图像描述


编辑 - 更多信息:

我们的 CloudFront 发行版支持 HTTP/2:

在此处输入图像描述

看来客户端和服务器在 h2 上达成一致:

在此处输入图像描述

0 投票
2 回答
108 浏览

reactjs - Is this only possible with external URLs and not local?

I'm trying to make a photo gallery using react-images, the URLs are correct but the photos themselves are not loading into my web app. I get the broken image icon when switching themodalIsOpen:false to true.

Ive tried looking up examples of the same problems and alternatives, like if the component was configured right or if I am extending it right in the class.

This is in the actual gallery.js file, the web page that renders the gallery.

I am seeking some feedback on how to get this to work and what I did wrong, or what I should explore more.

0 投票
1 回答
389 浏览

reactjs - 我想使用 react-images 在模态轮播上添加一个“下载按钮,该按钮应该在模态弹出窗口中可用

我可以在轮播中添加一个按钮作为参数吗,我尝试了所有可能的方法来添加一个按钮