React: image src未通过API获取路径。图像未定义
React是一个用于构建用户界面的JavaScript库。它采用组件化的开发模式，使得开发者可以将界面拆分成独立的、可复用的组件，从而提高代码的可维护性和可重用性。
针对你提到的问题，"image src未通过API获取路径，图像未定义"，可能有以下几个方面的原因和解决方法：
- 图像路径问题：首先要确保你通过API获取到了正确的图像路径。可以使用浏览器的开发者工具检查API返回的数据，确认图像路径是否正确。如果路径不正确，可以检查API的实现代码，确保返回的图像路径是正确的。
- 图像加载问题：如果图像路径正确，但图像仍然未定义，可能是因为图像加载的过程中出现了错误。可以在React组件中使用
onError事件处理函数来捕获图像加载错误，并进行相应的处理。例如，可以显示一个默认的占位图像或者给出错误提示。 - 组件渲染问题：如果以上两个方面都没有问题，那么可能是React组件的渲染逻辑有误。可以检查组件的代码，确保正确地将API返回的图像路径传递给
<img>标签的src属性。同时，也要确保图像路径是作为字符串传递的，而不是作为对象或其他类型的数据。
总结起来，解决"image src未通过API获取路径，图像未定义"的问题，需要确保图像路径正确、图像加载没有错误，并正确地将图像路径传递给React组件进行渲染。如果问题仍然存在，可以进一步检查代码逻辑或者提供更多的上下文信息以便更准确地定位问题。
关于React的更多信息和学习资源，你可以参考腾讯云的React产品介绍页面：React产品介绍。
相关·内容
嗨，我有一个猫图像阵列，我从Giphy api恢复。
我想要做的是单击图像并console.log与图像相关联的url。
下面的代码是我尝试过的。
当我点击搜索按钮console.log显示25个未定义的项目时，所有这些都发生了。
因此，我认为我传递的信息是错误的，并且它正在检测div外部的onCLick
import React from "react";
function handleClick(props) {
console.log(props.gif);
}
const UserItem = props => {
return (
浏览 8提问于2019-08-18得票数 0
回答已采纳
我对Laravel并不熟悉，我会做出反应，做一个测试项目，但我发现自己在访问这两个框架之间的数据方面陷入了困境。
我想渲染一个图像元素创建在一个反应组件到一个Laravel刀片。在用户通过Laravel刀片中的表单上传图像之后，从{{Session：：get(‘image’‘)}接收图像的源。
如何从反应性组件状态内访问{{Session：：get(‘image)}，以便根据用户上传的内容使用动态src呈现img标记?身份验证不是蜜源。
更多信息：
我可以通过以下方式访问Laravel刀片中上传的图像：
<img src="images/{{Session::get('i
浏览 1提问于2021-05-03得票数 0
回答已采纳
我试图使用getStaticProps从这个API中获取一个图像，但我似乎无法得到它。
如果我加上“？”对这样的代码，然后在日志中，它说‘未定义’。为什么我不能把它拿来？
<div>
{hotelPics.map((hotelpic)=> (
<Image src={hotelpic.url} />
))}
</div>
这是代码：
import Image from 'next/image';
import React from 'react'
function Images({hotelPics })
浏览 3提问于2021-12-07得票数 2
1回答
我正在尝试在react原生中制作一个应用程序，并且当你点击该应用程序时，至少会开始放置一个图像作为屏幕。 问题是应用程序无法找到我调用的图像或javascript文件。我试图更改文件的位置，但它似乎没有任何作用。 以下是开始屏幕文件的代码 import React, {Component} from 'react';
import {Image} from 'react-native';
const StartScreen = () => (
<Image source = {require('./src/assets/i
浏览 24提问于2019-05-29得票数 0
回答已采纳
4回答
我有一个从父级获取道具的组件，道具有一个图像地址字段，我正试图显示它。下面是我写的内容：
import React from 'react'
import { Image } from 'react-bootstrap';
interface Props {
src: string;
}
class ProductImage extends React.Component<Props> {
render() {
return <div><Image className="img-fluid
浏览 4提问于2021-05-20得票数 0
1回答
我正在从一个通过src道具传入的url中加载一个svg映像。
我遇到的问题是，我正在将svg存储到状态，但是当url更改时，显示的图像将是单击的前一个图像，而不是当前图像。
我可以看到，存储在状态中的图像始终是最后选择的图像。
我相信它是如何从api中获取映像并将其存储到这里来声明的，但我不太明白它是如何工作的，以及它如何用svg更新状态。
).then(
svg => this.state.image = svg
);
我怎样才能改变这一点，使状态用正确的图像更新？
SVG组件
import React from 'react';
import fetch fro
浏览 0提问于2018-09-26得票数 2
回答已采纳
1回答
我正在尝试通过api调用来渲染图像。我有两个react组件，我相信我已经相当接近于渲染图像了，但是在我的artist.jsx中，我得到了未定义的错误，并且找不到原因。下面是这两个组件的代码。
应用组件：
artistOnClick(e) {
let artist = e.target.innerHTML;
this.getSubsequentCollabs(artist);
}
render() {
const img_url = this.state.selectedArtist.img_url;
const { artistCounts } =
浏览 0提问于2016-11-06得票数 0
我试图使用wp_get_attachment_image函数插入图像。为此，我需要使用图像ID，所以现在我需要知道如何通过来自WP定制API的get_theme_mod中的图像URL获取这个ID。
所以：
$image_src = get_theme_mod('header_logo', '');
$image_id = HOW TO GET ID FROM $image_src ??
echo wp_get_attachment_image( $image_id, 'logo' );
我找到了这个https://stackoverflow.co
浏览 0提问于2019-02-19得票数 0
回答已采纳
我在config.js中定义了一个图像数组。当使用配置文件时，我无法呈现任何图像，不管原始HTML渲染是否有效。
config.js
portfolioEntry: [
{
image: '../assets/images/portfolio/solo2.jpg',
service: 'Service text',
address: 'The address'
},
{}
...
]
portfolio.js
import React from "react&#
浏览 2提问于2020-04-25得票数 0
{this.imageRenderer(item.data[0].media_type, item.links[1], item.links[0])}
当我引用item.links时，它说它是未定义的，但它就在那里！！(我从NASA API获得数据)图像：
如您所见，有一个链接属性。我很困惑为什么会发生这种事。控制台错误：
TypeError: "item.links is undefined"
render AstronomyContainer.js:127 render AstronomyContainer.js:119 finishClassComponent
浏览 0提问于2019-03-12得票数 1
回答已采纳
2回答
我试图使用一个随机的图像生成器的演示应用程序，我正在创建。
我试过了端点：
但是，当我将图片列表添加到我的页面时：
<View>
<Image
source={{ uri: 'http://thecatapi.com/api/images/get?format=src&type=gif&size=small' }}
style={{ width: 100, height: 100 }}
/>
<Image
source={{ uri:
浏览 1提问于2018-09-16得票数 8
我想从YAML读取图像文件的路径，并使用gatsby-image创建响应式图像，但它不允许我做我想做的事情。 data.yaml fileKey: data
profile:
- name: Foo
image: image.jpg
- name: Bar
image: image2.jpg 我的查询如下所示： query DataQuery {
pagesYaml(fileKey: {eq: "data"}) {
profile {
name
image {
childImageSharp {
浏览 28提问于2019-09-18得票数 0
回答已采纳
1回答
我正在使用react创建一个应用程序，并希望导入图像，但我不能只编写<img src="path/filename.jpg" />
我有一个数组，其中包含来自存储库的每个path+filename图像。数组的内容取决于存储库中的文件量。
我想创建一个图库，当我动态地获得图像的路径和文件名时(当组件被创建时)，我想创建一个图库，当我得到数组(称为gallerie)时，我不能像import img1 from "../images/.../image1.jpg"一样在我的文件的顶部导入图像，我像这样迭代它，但是图像没有加载：
{this.state.ga
浏览 2提问于2018-11-29得票数 0
我正在尝试将React应用程序加载到asp.Net视图(项目最初是用asp.net编写的，我正在使用React创建新页面，用于学习和娱乐)。 当React应用程序在dev move中运行时，所有图像在所有路径正常工作的情况下加载时都没有任何问题。 使用npm run build构建应用程序后，将生成js文件和相应的图像文件，我将它们放在asp.net应用程序的文件夹中(例如，脚本文件夹)。 当我尝试查看页面时，React应用程序加载并呈现屏幕，但由于网站找不到图像，所有图像都损坏了。 在查看图像未加载的原因后，由于图像试图从当前URL加载，而不是从js文件和图像存储的位置加载，导致出现404
浏览 23提问于2019-10-14得票数 0
我有一个组件，其中我从数据库中随机获取一个图像路径，并希望将其设置为一个图像src，尽管如果我手动输入 <image src={require('../../assets/images/img1.jpg)} 它起作用了，但这样它就不起作用了 import React, { useEffect, useState } from "react";
import "./PreviewContainer.scss";
import axios from "axios";
export default function PreviewCon
浏览 17提问于2020-07-27得票数 0
回答已采纳
我正在从API中获取一个图像列表。然后，我将这个图像向下传递给一个带有道具的img元素。这可以帮助我生成用于缩略图的图像列表。
编辑
图像缩略图是一个预览，在单击其中一个图像缩略图时，我想要将该图像完全大小添加到页面中。
问题是，我希望能够单击其中一个图像并提取它的src值，以便最终可以将该映像装入一个完整的显示容器中：
我的努力只记录了api列表中的所有图像，当我真的只想要单击的特定图像时。
JSON返回数据：
[{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
1: {image: {image: image: "https://
浏览 5提问于2021-01-22得票数 0
回答已采纳
1回答
我有一个内部带有组件的页面结构
homepage
- jcr:content
- topBanner
- background
- file
secondpage
- jcr:content
- topBanner (different component from the homepage)
- background (same component as homepage)
- file
我需要的是，当我上传一个图像到主页的背景，我希望相同的图像去第二页。
我尝试过使用granite属性，但由于找不到javasc
浏览 2提问于2018-01-31得票数 0
我在做一项挑战。我的任务是使用两个APIS：和
显示图像和描述。到目前为止我有：
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import axios from 'axios'
const Cat = ({ cat: { name, weight, life_span, description } }, { image: url }) => {
return (
<div className='cat
浏览 3提问于2020-11-16得票数 0
1回答
我不确定如何使用最佳实践来显示存储在MongoDB数据库中的图像。
我有一个用户通过React上传图像，然后通过API调用发送到快递服务器。然后使用multer获取缓冲区数据并将其发送到MongoDB。
目前，为了在前端显示一个图像，我使用express来提供图像。这意味着我可以通过输入'image_id‘来访问mongo中的任何图像
在前端说的话。我有一个API调用，它获取所有的图像Ids，然后使用它们创建一个链接。就像这样。
constructor(props) {
super(props)
this.state = {
imgID: '&#
浏览 0提问于2019-07-31得票数 0
回答已采纳
2回答
这是我的代码。我在"src“文件夹中有一个图像文件夹，我想使用我的components/Myapp.component.js中的图像
import React from 'react';
import imageOne from '../img/cool-img.jpg';
function Myapp() {
return (
<div className="myapp">
<h1>import image<h1>
<img src={imageOne}
浏览 0提问于2020-02-08得票数 0
1回答
我正在做一个关于React的项目，我希望用户从输入中选择多个图像，并在carrousel中显示所选图像。 为此，我想创建一个具有所述图像的本地路径的数组。 const [localURL, setLocalURl] = useState([]);
const handleFileInput = (e) => {
e.preventDefault();
e.persist();
for (let i = 0 ; i < e.target.files.length ; i++) {
let reader = new
浏览 16提问于2020-08-26得票数 0
回答已采纳
我在这个领域很新，我在很多地方都找过了，但找不到解决办法。我得到错误"TypeError:无法读取未定义的属性‘图像’“。我不知道错误的problem.The图像在哪里。
有错误的类在这里。
import React, {useEffect} from 'react';
import { Link } from 'react-router-dom';
import { useSelector, useDispatch } from 'react-redux';
import { detailsProduct } from
浏览 4提问于2020-06-02得票数 0
回答已采纳
我不知道问题出在哪里。不管我多努力，我都看不出问题所在。请帮帮我!我用的是反应路由器。链接的地址指向我想去的地方，但是里面的内容不是我想要的。"OpenChats“的屏幕(显示为”오픈채팅“的文本)与"Chat”的屏幕显示相同的屏幕(显示为“채팅”的文本)。我希望每个屏幕都能出现。链接是不同的，但是为什么会出现相同的屏幕？里面的内容是不同的。
Openchat数据文件
import React from "react";
import OpenChatPresenter from "./OpenChatPresenter";
-import im
浏览 2提问于2020-12-22得票数 0
回答已采纳
我在MVC 5项目上工作，在那里我试图裁剪和验证图像的宽度和高度。
在这里jQuery代码，reader.readAsDataURL(this.files[0])发生错误‘无法读取属性'0’的未定义‘。
var imageCropWidth = 0;
var imageCropHeight = 0;
var cropPointX = 0;
var cropPointY = 0;
var _URL = window.URL || window.webkitURL;
$('#files').change(function ()
浏览 2提问于2017-05-03得票数 3
我正在尝试在React Native中呈现一个FlatList，它就像一个图像传送带。
我想要提供assets文件夹中的图像源，并传递renderItem中的每个项目源，但我得到错误，未定义不是一个对象。
状态如下：
export default function App() {
const [images, setimages] = useState([
{src:require('./assets/image1.png'),key:'1'},
{src:require('./assets/image2.png'),key:
浏览 0提问于2020-03-16得票数 4
回答已采纳
我试图在React/webpack项目中添加调整大小的图像和链接图像功能到ckEditor。
这就是我所做的！
分叉式ckEditor回购
克隆稳定的ckEditor分支
git clone -b stable git@github.com:<your-username>/ckeditor5.git
添加所需的插件->构建->推送
cd packages/ckeditor5-build-classic
npm run build
在我的项目中安装分叉分支的稳定分支
npm i git+https://github.com/your
浏览 7提问于2021-10-07得票数 1
回答已采纳
我已经创建了一个旋转木马，其中图像是动态存储的。我想选择多个图像并捕获所选的图像。现在，我选择的任何图像都希望显示在另一个页面上，为此我使用了ImagePicker。显示了多个图像，因为我在地图中使用了地图。我试了很久，但我解决不了这个问题。请帮帮忙。下面是我的代码和输出。
import React from "react";
import Carousel, { Dots } from '@brainhubeu/react-carousel';
import '@brainhubeu/react-carousel/lib/style.css';
浏览 0提问于2020-03-24得票数 0
1回答
我正在阅读react入门教程，在我正在做的一个实验中遇到了一个问题。我可以记录一个对象，但是在控制台中，我得到了以下错误：
未定义TypeError:无法读取未定义属性的“结果”
我可以记录这个对象，因此我知道我的api调用是成功的，但是由于某种原因，我的reason状态似乎没有得到更新。我认为我的呈现函数发生在数据对象从API中更新之前，但不确定如何修复它。
<!doctype html>
<html>
<head>
<title>Weather Widget</title>
<link rel="s
浏览 3提问于2014-05-03得票数 3
回答已采纳
1回答
我正在学习一门在线课程，面临着一个棘手的问题：
最后一个项目(使用React和一个API)获取在线“jpg”照片的链接，这样当您按下按钮时，它就会显示该照片并识别照片上的面孔。我想把这个应用在我的个人电脑上的本地图像上，但是没有找到方法。我至少需要能够显示本地图像时，提供它的本地路径，然后按下按钮。请帮帮忙！
这些档案如下(当然是简短的)：
App.js
import React from 'react'
import FaceRecognition from './components/FaceRecognition/FaceRecognition';
ren
浏览 1提问于2021-10-17得票数 0
我在这里遇到了一个奇怪的问题，我创建了一个检查图片是否上传的方法。但由于某些原因，我的"else“不起作用。
在我的主组件"Fragrances“中，我正在循环我的API。并检查图像数组是否为空，否则显示图像。
我做错了什么？
我的代码：
图像组件：
import React from 'react';
import NoPicture from 'components/NoPicture/NoPicture';
const Image = props => {
const { url } = props;
retur
浏览 0提问于2019-05-11得票数 0
我正在使用新的库来生成元图像。从官方的中，他们展示了如何使用外部来源的图像。
问题
<img
src={"https://res.cloudinary.com/iqfareez-cloud/image/upload/v1665576747/IIUM%20Schedule/release_meta_kosong_onkkbm.png"}
alt={"Release background"}
>
但是，我想使用存储在公共目录public/images/release-bg.png中的本地静态映像。这个展示了一个访问静态资产的示例，因此我尝
浏览 19提问于2022-10-12得票数 0
回答已采纳
我正在使用下面的基础api，就像在许多示例中一样..。但是如果我像下面这样使用dotenv来隐藏名称和上传预设，那么这将保证我的api的安全，或者人们能够从上传图像时返回的img urls中找到它。
formData.append('upload_preset'，process.env.REACT_APP_UPLOAD_PRESET)；https://api.cloudinary.com/v1_1/${process.env.REACT_APP_CLOUD_NAME}/image/upload，
浏览 0提问于2019-10-30得票数 1
我的目标是让我的图库图像在加载时进行渲染。
通过在线查看，我了解了onLoad方法。
这就是我试图利用的，想法是preloader.gif将渲染直到图像加载，并简单地用加载的图像替换图像源。
就像现在(下图)一样，如果我不使用onLoad方法，图像似乎会以正常的方式加载，所以在图像加载之前，有一段时间根本没有图像被渲染。
我到底做错了什么？
我已经精简了代码以使问题更容易阅读。
import React from 'react';
import ReactDOM from 'react-dom';
import preloaderImage from '
浏览 0提问于2017-09-11得票数 6
回答已采纳
1回答
我使用react和节点使用表单数据将文件上传到mongo。在检索它们时，源不显示图像。这是我从图像数据库中检索信息的代码
const [imagespath, setimagespath] = useState([])
useEffect(()=>{
axios.get("http://localhost:3001/api/getimages").then((response)=>{
setimagespath(response.data)
})
} [])
我可能做错了什么？
下面是显示图像的代码
{imagespath.map((image)=&g
浏览 4提问于2022-06-06得票数 0
1回答
我正在尝试通过props传递图像路径
require("./house.jpg");
但它给出了一个损坏的图像，我的图像的路径在src下。
我应该如何将图像路径传递给React中的道具？
const imagesrc =require("./house.jpg");
ReactDOM.render(
<React.StrictMode>
<Header />
<HomeBanner width='100%' height='400px' alt="Banner imag
浏览 10提问于2021-02-22得票数 1
我想把SingerBox.js中的name变量传递给专辑组件，这样我就可以显示艺术家的专辑了。当我打印props.name时，它是未定义的。我怎样才能把它正确传递？
SingerBox.js
import React, { Component } from "react";
import Modal from "react-bootstrap/Modal";
import ImageNotFound from "../../ImageNotFound.jpg";
import "../../App.css";
import { L
浏览 0提问于2020-05-24得票数 0
回答已采纳
我们在我们的rails 4应用程序中使用车把。困扰我们的问题是，我们需要使系统中使用图像的每个hbs文件都使用.erb扩展，因此在生产中预编译图像时，我们将拥有正确的资产路径.
因此，我需要转换这种类型的代码，而不是将客户端代码与服务器代码完全分离开来：
sideBarTemplate.hbs：
<img src="assets/main/logo.png" alt="image description" width="126" height="34">
转换为这种类型的代码：
sideBarTemplate.hbs.
浏览 5提问于2015-02-01得票数 3
回答已采纳
我正在做一个简单的反应应用程序，可以从API调用中找到图像。但这是一个明显的问题。在imageList.js中，我得到了以下错误的error.please帮助我:无法读取属性‘TypeError’的未定义我不知道如何解决我是新手的反应请帮助我这段代码 App.js import React from 'react';
import SearchBar from './SearchBar'
import unsplash from '../api/unsplash';
import ImageList from './imageList&
浏览 5提问于2021-04-23得票数 0
回答已采纳
1回答
我有一个组件，它作为一个可折叠的ui元素工作，在该元素中，打开图像时加载图像。这些可折叠元素是列表的一部分，我需要图像作为变量，因为每个列表项都不同。
我知道我需要在Gatsby中使用动态图像，因为是，我需要从一个道具中解析图像名。
尝试使用Dynamic时，当试图从道具中解析图像时，我会得到“未定义”。根据，不能在不位于/pages目录中的组件中使用GraphQL。相反，他们建议使用，而这正是我试图在特定情况下如何使用它的地方。
下面是我在src/components/Collapsible.js中要做的事情
import React, { useState } from "reac
浏览 16提问于2022-05-01得票数 -1
3回答
我试图在我的应用程序中显示一个图像，使用React原住民提供的文档。代码是。
唯一关心的文件是有代码的app.js文件。图像与app.js文件位于同一个文件夹中。有人能帮我找出为什么这不管用吗？所涉及的代码行是：
<Image source={require('./practicialogo.PNG')} />
我得到了两个错误: 1.无法解析到文件的路径(由于图像与文件2位于同一个文件夹中，所以我无法理解该路径)。ES Lint在我调用图像的行中给出了一个意外的require() (全局要求)错误。
以下是整个文件：
import React from '
浏览 2提问于2017-12-14得票数 3
回答已采纳
1回答
通过转角和弹簧引导保存图像
、、、、
我正在执行一个spring引导项目，在这个项目中，每个对象都有一个映像，实际上，由于object和spring一起将路径保存在一个字段中，由于(<src="springPath">)，每个图像都显示在角上。
为此，我在修改我的应用程序时遇到了一个问题，因为用户可以上传图像，但是由于未知的原因，角不能获取该图像。
是否有人有这个问题，并可以建议我在哪里存储/获取图像或如何解决这个问题，谢谢！
pathtoSave = "county-fe\dist\county-fe\assets"
我也试图在"county-fe\resource\src\a
浏览 5提问于2022-08-29得票数 1
回答已采纳
2回答
我有一个React组件(也使用TypeScript)，它将照片返回给其父组件：
import React, { useEffect, useState } from "react";
import axios from "axios";
export const Photo = () => {
const [image, setImage] = useState<Image[]>([]);
// Backend API
const proxyUrl = "http://localhost:3001";
con
浏览 16提问于2020-11-13得票数 0
我有一个函数可以从Firebase存储中检索图像：
import {
getStorage,
ref,
getDownloadURL
} from 'firebase/storage';
const storage = getStorage();
export async function getImage(location) {
const ImageURL = await getDownloadURL(ref(storage, location));
return await ImageURL;
}
然后在一个React组件中调用它：
import
浏览 3提问于2022-03-21得票数 0
回答已采纳
2回答
我已经成功地使用react-native-camera获取了一个图像，然后在<Image>元素中显示它，然后将图像的 base64 字符串发送回我的后端，但是，当图像位于后端时，我无法成功地显示它，因为它在base64中，图像在<Image>元素中正确显示，并且src属性设置为data:image/jpeg;base64,{BASE64_HERE}格式。
你能引导我做这件事吗？
这是我的密码
'use strict';
import React, { PureComponent } from 'react';
import {
Ap
浏览 0提问于2020-03-28得票数 2
1回答
背景图像无反应显示
、、、、
Public>images>img-2.jpg
src>components>pages>Services.js>
import React from 'react';
import '../../App.css';
export default function Services() {
return <h1 className='services'>SERVICES</h1>;
}
src>>A
浏览 7提问于2021-12-05得票数 0
回答已采纳
2回答
我试图在react中显示一个图像，它既不是本地图像(在客户机中)，也不是来自web的外部图像，而是位于node.js快递服务器中的图像(我不想把它称为外部图像，因为域可能会改变，而且看起来不太正确)。
我知道我不能像在客户机中使用本地映像那样导入它，因为我们谈论的是不同的本地主机。我试过这个：
loadImage = async (imageUrl) => {
const response = await fetch(`/api/images/${imageUrl}`);
const data = await response.json();
this.setSt
浏览 0提问于2020-10-22得票数 0
回答已采纳
我想在我的应用程序中动态加载一些本地图像。我有个有记录的json
{名称: image12，海报：'image1.jpg'}，{name: image13，海报：'image2.jpg'}
我有一个文件夹，里面有许多图像，比如'image1.jpg'，'image2.jpg'，'image3.jpg'。当我试图呈现json记录时，我将<img src={'./image/image1.jpg'}/>放入其中，但它不起作用。
[
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
