Question

当我遇到一个问题时，我正在关注这个tutorial。我正在尝试从JSON格式的URL加载图像。我正确地遵循了教程，但我无法加载图像。

使用react-tools我看到url字段显示为undefined！

以下是代码：

//这是flat.js

import React from 'react';
import "./flat.css";

class Flat extends React.Component {
 render() {

    const title = this.props.flat.price + this.props.flat.priceCurrency + "-" +  this.props.flat.name;
    const style  = {
        backgroundImage: `url('${this.props.flat.imageUrl}')`        
    };
    return (

     <div className="flat">
      <div className="flat-picture" style={style}></div>
      <div className="flat-title">{title}</div>

     </div>
    );
}}export default Flat;

//这是app.js

import React, { Component } from 'react';
import './App.css';
import Flat from './components/flat';

class App extends Component {
    render() {
       const flat = {
           "name": "Trendy Apt in Buttes Montmartre",
           "imageUrl": "https://raw.githubusercontent.com/lewagon/flats-
                        boilerplate/master/images/flat2.jpg",
           "price": 200,
           "priceCurrency": "EUR",
    };

return (
  <div>
   <Flat flat={flat} />
  </div>

); }}export default App;

Answer 1

看起来你的拼写错误。

在app中你有

“ imageUrl ”：“flat2.jpg”，

使用时

$ {this.props.flat。的 imgUrl的}

一个是imageURL，另一个是imgUrl。你需要纠正。您可能在其他地方还有其他问题，但请尝试更正此问题

Answer 2

您正在设置

backgroundImage：url（'$ {this.props.flat.imgUrl}'）

在你的扁平物体中，你有。

flat = {
           "name": "Trendy Apt in Buttes Montmartre",
           "imageUrl": "https://raw.githubusercontent.com/lewagon/flats-
                        boilerplate/master/images/flat2.jpg",
           "price": 200,
           "priceCurrency": "EUR",
    };

我不知道是否存在类型错误。但是，事实并非如此。您看到保存了a和e字母

正确的判决

backgroundImage：url（'$ {this.props.flat.imageUrl}'）

随着图像尝试..

let variable = this.props.flat.imageUrl.toString()

const style  = {
        backgroundImage: url(variable)        
    };

也许，以这种方式它需要url图像。祝你好运!!

Answer 3

我终于找到答案了！

我只是忘了使用。在css中

例如：

//错误

flat{
 height: 200px;
}

//正确

.flat{
 height: 200px;
}

谢谢你们的帮助！

来自JSON的Url显示为未定义（ReactJs）！

3 个答案: