如何在reactjs中设置map json文件后的背景图片？
在ReactJS中设置map JSON文件后的背景图片可以通过以下步骤实现：
- 首先，确保你已经安装了ReactJS的开发环境并创建了一个React项目。
- 在React项目中，将你的JSON文件放置在public文件夹下或是在src文件夹中创建一个新的文件夹用于存放JSON文件。
- 在React组件中引入你的JSON文件。你可以使用import语句导入JSON文件，例如：
import data from './data.json';。 - 在React组件中，可以使用
map()方法来遍历JSON文件中的数据。例如，你可以将数据存储在组件的state中，然后使用map()方法在JSX中渲染每个数据项。 - 在渲染每个数据项的过程中，你可以通过使用内联样式（inline style）来设置背景图片。例如，你可以使用
style属性来指定背景图片的URL，如下所示：
<div style={{ backgroundImage: `url(${item.image})` }}>
{/* 内容 */}
</div>其中item.image是你在JSON文件中定义的背景图片URL的属性名。
- 最后，确保你的JSON文件中的图片URL是正确的，并且你的React组件能够正确地读取和渲染JSON文件中的数据。
总结：
在ReactJS中设置map JSON文件后的背景图片可以通过导入JSON文件，使用map()方法遍历数据，并在渲染过程中使用内联样式来设置背景图片。确保JSON文件中的图片URL正确，并验证React组件能够正确地读取和渲染JSON数据。
对于ReactJS开发的更多细节和相关推荐的腾讯云产品，请访问腾讯云官方网站的ReactJS相关文档和产品介绍页面：
- ReactJS官方文档
- 腾讯云Serverless Framework
- 腾讯云云函数（Serverless Cloud Function）
- 腾讯云云开发（Tencent CloudBase）
- 腾讯云COS（对象存储）
- 腾讯云CDN（内容分发网络） 请注意，由于要求不能提及特定的云计算品牌商，因此以上链接仅用于参考，具体产品选择可以根据实际需求进行决策。
相关·内容
1回答
我搜索了大量的帖子，但没有找到解决我的构建问题的方法。
我有两个主要问题
/public/locale/xx/xxx.json文件路径在构建后不包含
css中使用的背景图像路径不能正常工作。
结构如下：
my-app
public
images
image.jpg
locale
xx
xxx.json
src
以及像url(/images/image.jpg)这样的背景图片，
url在dev上运行良好，但是在生产/生成之后，它相对于/路径，而不管package.json中的homepage集是什么
地区文件也是如此
浏览 0提问于2018-12-03得票数 1
回答已采纳
1回答
我是ReactJS和web开发人员的新手，一般情况下，我正在尝试将本地json文件呈现到我的EmojiList组件中。 我不确定我的代码出了什么问题。我也在使用typescript。 有没有人可以看一下？提前谢谢。 EmojiList.tsx文件： const json = require('../../emojisDb/emojis.json');
const EmojiList = (props: any) => {
const [emojis, setEmojis] = useState([]);
useEffect(() => {
co
浏览 16提问于2021-07-24得票数 1
6回答
componentDidMount()中有一个get请求
componentDidMount() {
var manufacturers = []
this.props.participants.map(participant => {
Get("manufacturer/" + participant.id, "").then(result => {
manufacturers.push(result)
console.log(manufacturers)
});
});
this.
浏览 2提问于2018-11-28得票数 0
我想将我的JSON文件的“描述”药水呈现到Reactjs列表中。
这是我的App.js
import log from './logs/log'
function App() {
const data = log["TProgramLogSerialize"].["ProgramLog"].["TProgramLogItem"].map((song, key) => (
<li key={key}>{song.Description}</li>
))
r
浏览 2提问于2021-07-17得票数 0
回答已采纳
如何从json文件中获取数据并以升序呈现它们？例如，假设我有这个json文件。
[{
"id": 0,
"name": "Vernon Dunham",
"company": "Qualcore",
"email": "vernon.dunham@qualcore.com"
}, {
"id": 1,
"name": "Dori Neal",
"company": "Sunopia&#
浏览 2提问于2021-09-27得票数 0
我正在尝试reactjs教程中的示例，以便从服务器(文件)中读取json。但是，我的"componentDidMount“没有被调用。
代码如下：
var CommentBox = React.createClass({
loadCommentsFromServer: function() {
$.ajax({
url: this.props.url,
dataType: 'json',
success: function(data) {
this.setState({data: data});
浏览 1提问于2016-05-03得票数 0
从这个，我想从list[0].main.temp, list[0].dt_txt到list[39].main.temp, list[39].dt_txt
我想得到温度和日期，并希望显示在X轴温度在Y轴日期。
import logo from './Images/logo.png';
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import { Nav, Navbar, Button, Form, FormControl } from 'react-b
浏览 2提问于2021-07-28得票数 0
回答已采纳
4回答
我是ReactJS的新手，试图从JSON文件中获取数据。我已经创建了两个文件，一个是products.json和app.jsx。我可以在console.log()中得到结果
[{…}]
0
:
{title: "Product Title", img: "./p-1.jpg", des: "DES1", rs: 599}
length
:
1
__proto__
:
Array(0)
但它正在呈现在视野中。有时我没有定义，或者数据本身没有被填充。
，这是我的反应代码.
import React from 'react';
impo
浏览 0提问于2018-01-18得票数 0
回答已采纳
在我的ReactJS文件中，我JSON.stringify我的对象，看看我得到了什么。 return (
<div>
{ JSON.stringify(peopleChannel) };
</div>
) 我得到的返回值是这样的 {
"Y3WJb6": {
"photoURL": "https://myimage.com",
"email": "abc.com"
},
"Yzfd6": {
"p
浏览 69提问于2021-07-29得票数 1
回答已采纳
我有一个reactJS应用程序，在这个应用程序中，我试图动态地呈现一些数据，然后用fetch()承诺读取这些数据。这是我的应用程序的代码：
import React from 'react';
import '../styles/app.css';
//think of react components as functions
class Testpage2 extends React.Component {
constructor(props) {
super(props);
this.state = {
浏览 1提问于2018-08-26得票数 0
回答已采纳
此问题与上述问题链接中提到的标记无关
这是关于一片土地的背景
当我们给谷歌地图制作者设置背景图片的时候，有没有办法用android设置背景图片来突出显示一个特殊的大陆呢？
任何帮助或参考
浏览 5提问于2016-02-02得票数 2
10回答
我有一个reactjs/webpack应用程序，正在尝试为bodytag标签设置背景图片：
body{
background: url("../images/some-background.jpg");
background-size:contain;
background-position:top;
background: cover;
}
但是，在加载组件之后，主体样式不会出现在page.It中，但会显示在控制台中。有没有办法在主页面显示背景图像，同时在由webpack加载的CSS文件中使用CSS规则?这是因为reactjs做了一些我不知道的
浏览 4提问于2017-06-28得票数 28
2回答
我正在尝试获取一些数据，其格式如下：
[
{
"id": 1,
"some_data": "..."
},
...
]
我想要获取的是一个列表，其中显示了从fetch中获取的项。如果我将相同的数据放在项目内的一个文件中，它就可以工作。
然而，当我试图映射它时，我得到了一个错误，说"this.data.map不是一个函数“。因此，我使用Array.from()对其进行了一些更改。它目前看起来是这样的：
export default class Main extends React.Component {
c
浏览 0提问于2019-02-28得票数 0
1回答
我有从一个电子商务网站的网络标签中填充的数据，如果我在一个"data.json“文件中有20页的数据，我如何使它成为这样，使一页显示前20项，下一页显示接下来的20项？
浏览 6提问于2021-12-19得票数 1
1回答
我有这样的JSON文件
[{
"amenity": ["bar", "restaurant", "college", "library", "school", "university", "atm", "bank", "clinic", "hospital", "pharmacy", "nursing_home", "cinema", "embassy"
浏览 6提问于2021-05-25得票数 0
我对ReactJS非常陌生，我正在尝试使用表单。具体地说，我正在尝试基于(本地) <option>文件中的条目构建一个JSON标记列表。
单步执行调试器，我可以看到这些值被正确读取和解析。然而，在呈现的页面中什么也没有出现，我不太确定原因。
下面是我编写的组件：
import React, { Component } from 'react';
const countries = require('../Data/countries.json')
class Countries extends Component {
constructor(
浏览 23提问于2018-06-03得票数 1
回答已采纳
在学习如何使用Fetch with ReactJS的教程中，我能够从API/json访问特定部分的数据，但是当尝试访问其他部分时，我会得到一个错误。这是JSON文件，它使用以下API：
代码
import React, { Component } from 'react';
import {render} from "react-dom";
import './BuildingSimulation.css';
class BuildingSimulation extends Component {
state = { data: []
浏览 1提问于2018-04-28得票数 0
我想在Facebook的react.js my-app上添加一张背景图片。我可以通过将背景图像设置为div元素来做到这一点。但我的副刊只覆盖了半页。这就是为什么我的形象没有充分占据这一页。
相反，我想在一个身体元素上这样做。但是如何添加一个身体元素并设置一个背景图像呢？
我尝试过这样做，但它在my-app的文件中不起作用。
<body background="http://i.imgur.com/DaNQJ6I.jpg"></body>
浏览 3提问于2016-08-17得票数 0
回答已采纳
我是用objective-C开发的。我想要更改选项卡栏背景，如下图所示：
代码如下：
UIImage *tabBarBackground = [UIImage imageNamed:@"tabbaritem_background.png"];
[[UITabBar appearance] setBackgroundImage:tabBarBackground];
但在设置背景图片后，背景不在正确的位置，如下所示：
背景图片应该像上面图片中的背景一样放在底部。
我错过了什么吗？有人能帮帮我吗？
提前谢谢。
浏览 4提问于2017-02-17得票数 1
如何在Asp.Net的皮肤文件中设置HTML body的属性背景图片？
我需要的是我需要改变我的页面的背景图像，如推特…但是通过使用皮肤文件...
浏览 4提问于2011-05-24得票数 0
2回答
所以我使用一个API来获取一个对象数组，每个对象都有很多数据，我想过滤这些数据来获取我需要的数据，这样我就可以在React-Table上显示它了。
export default class Table extends React.Component {
constructor(props){
super(props);
this.state = {
}
}
fetchData() {
const string = 'http://localhost:8000/issues/assigned/mike';
fetch(string
浏览 0提问于2018-05-04得票数 0
2回答
在我的JSON文件中，我有一些想要调用的数据层。如我的getInitState所示，我的JSON数据被组织为{forthem:[{articles:[]}]}。您还可以在上查看我的数据。
第一个函数(我使用的是变量fakeit )按预期工作。但是，第二个函数(我调用makeit来访问articles数据)不起作用。我得到一个Cannot read map of undefined错误。
我已经包括了我的完整代码，以供审查。
getInitialState:function(){
return {forname: '', forsym: '', forti
浏览 3提问于2016-11-22得票数 0
回答已采纳
2回答
我正在编写一段代码，它将从JSON文件中读取数据到reactJS文件。这个JSON文件包含多个页面，从"context“开始，然后是"pageNumber”。当我不包括
(details.context.pageNumber)
然后输出将只显示来自最新页面的数据内容，例如，如果JSON文件中有20页文件，它将显示来自第20页的数据。
但是当我输入上面的源代码时，它应该显示所有的页面内容，但是它没有显示内容，而是显示了这个错误。
以下是源代码：
componentDidMount(){
let jsonData01 = data01
jsonData0
浏览 1提问于2019-05-03得票数 0
回答已采纳
以下代码旨在更新投票系统。通过在页面加载时显示结果，可以很好地工作。
这是我的问题:每当单击Get、Count按钮时，我都需要更新每个用户的投票。
在后端，我有php代码，它返回如下所示的数组数据。
有人能帮助我显示数组值和更新例如(投票到11)取决于用户投票方式吗？
<?php
// Update user response on a post
$return_arr[]= array("vote"=>"11");
echo json_encode($return_arr);
exit;
?>
下面是axios调
浏览 1提问于2018-12-17得票数 1
回答已采纳
我尝试从.json文件中获取数据，并通过视图显示结果。下面是scoreboard.json文件。
{
"subject":"scoreboard",
"copyright":"Copyright 2015",
"data":
"games":{
"next_day_date":"2015-07-22",
"modified_date":"2015-08-04T07:34:50Z",
"mont
浏览 0提问于2016-02-16得票数 3
回答已采纳
2回答
我有以下来自React Js的api调用。它是一个类组件。我是新来React Js的。
class UserComponent extends React.Component {
constructor(props){
super(props)
this.state=({
users: []
});
retrieve(e){
e.preventDefault();
fetch(`http://localhost:8080/test/{this.state.id}`,{
"method&#
浏览 1提问于2021-08-10得票数 0
2回答
我在Reactjs中工作，我正在使用nextjs框架，现在我正在使用Nextjs从数据库中提取数据，但是现在我得到了以下错误TypeError:无法读取未定义的属性'id‘，如何删除它？这是我目前的代码
import { Box, Heading } from "@chakra-ui/react";
export async function getStaticProps() {
const response = await fetch("https://fakestoreapi.com/products");
const data = awa
浏览 6提问于2022-10-31得票数 0
回答已采纳
1回答
使用Map函数在reactJs.I中显示JSON数组元素。我已经尝试使用以下代码。我无法获得结果，并且它显示“无法读取null的'_currentElement‘属性”。请帮我解决这个问题。
import React, { Component } from 'react';
import Header from './js/components/Header';
import './App.css';
import './dist/css/bootstrap.css';
import cookie from '
浏览 1提问于2017-02-04得票数 2
回答已采纳
2回答
我在做纸牌游戏。我有个json数据库：
{
"characters": [
{
"name": "Character1",
"punch":12,
"kick":12,
"special":15,
"image":"character1"
},
{
"name": "Character2",
"
浏览 0提问于2019-03-05得票数 0
回答已采纳
6回答
尽管我已经在UITextField中设置了背景图像属性。它不适用。我没有使用任何编码。我刚刚使用Interface Builder选择了一个image.png文件作为背景图像。那么，该怎么做呢？并且在UITextView中没有背景图像属性。那么，如何将背景图片添加到textView中呢？谢谢你的帮助。
浏览 12提问于2012-12-03得票数 4
回答已采纳
我的代码有问题。我有一个带有选项的标签，当我试图设置联系人类型时，会出现白色屏幕，在控制台中出现错误"types.map()不是一个函数“。我认为问题的根源在于“type”是数组，当我选择使用state()的contact类型时，“type”变成了一个单一的值。我不知道该怎么解决。
这是我的密码：
import React, { useState, useEffect } from "react";
import { useNavigate } from "react-router-dom";
import styles from './post
浏览 8提问于2022-03-14得票数 1
我正在VisualStudio2017中开发一个有角度的cli v6项目，并注意到不想要的.js和.js.map`files正在为我在同一个文件夹中的一些类型记录文件生成。(我不想要任何产生的)
我注意到，文件夹中任何以角元素命名的文件(“服务”、“解析器”、“组件”、“指令”)似乎都不会创建这些额外的文件。
例如，如果我在components文件夹中创建我的-Component.Component.ts，就不会生成额外的js/js.map文件。
我的问题有两个：
确定是否生成这些额外文件的标准是什么？
如何防止它们被生成？
项目文件结构(显示不需要的文件)
src
|--
浏览 1提问于2018-08-23得票数 12
我的问题是在使用visjs网络库时如何设置背景图片。我的代码：
<script type="text/javascript" src="vis/dist/vis.js"></script>
var network = new vis.Network(container, data, options);
浏览 5提问于2016-01-20得票数 1
1回答
我有一个映射JSON的问题：
非常感谢你的帮助，谢谢
我使用以下代码试图映射json对象
await fetch('https://environment.data.gov.uk/flood-monitoring/id/floodAreas/?county=Lincolnshire')
.then(res => res.json())
.then(json => {
this.setState({
hasLoaded: true,
weatherItems: json
})
});
static rende
浏览 4提问于2020-10-07得票数 0
1回答
我正在尝试使用flask和reactjs从图像表中使用get方法显示图像。我已经成功地使用post method.But上传了图像，我不确定如何使用get方法显示它。以下是映像表： CREATE TABLE sales_lead_image_path(
id VARCHAR(255) PRIMARY KEY,
image_path VARCHAR(255),
); 这是我在后台编写的get方法，它工作得很好。 @visitImageController.route('/getVisitImage', methods=['GET'])
def getvisitI
浏览 24提问于2019-09-15得票数 1
回答已采纳
4回答
所以我已经看了几个小时了，试着把我的头挪开，但我就是想不出来。
我有一个json文件位于'/src/data/topbar.json‘，我想将它包含在我的topbar容器组件中，它将用于生成顶部菜单。
我在这里做错什么了？
topbar.json：
{
"topbarLinks": [
{
"id": 1,
"icon": "header__topbar__list__link__icon glyphicon glyphicon-home",
"text":
浏览 2提问于2017-10-03得票数 1
回答已采纳
1回答
我需要从带有子目录的目录中动态加载图像。我向src添加了文件夹图像，只要我使用纱线开始启动应用程序，它就能工作。但是该文件夹没有打包到dist生成中。我尝试将文件夹添加到package.json
"build": {
"files":"images"
}
我尝试使用公共目录，例如：
texturesPath = process.env.PUBLIC_URL +'/assets/data/textures/'
我知道如何导入图像，但是我需要包含200个子目录的整个目录。我必须分别导入每个图
浏览 1提问于2018-12-24得票数 1
如何让下面的API在列表中显示JSON中的每个date和rate？我已经浏览了JSON，从我可以看到的情况来看，我已经正确地映射了它，但是{this.state.calendarDay}在控制台中没有定义，导致.map未定义。
我遗漏了什么？
import React, { Component } from 'react';
class Rates extends Component {
constructor(props) {
super(props);
this.state = {
fetched: fals
浏览 1提问于2018-06-26得票数 2
回答已采纳
1回答
我使用ReactJS从JSON文件中获取数据。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Demo Fetch</title>
<link rel="stylesheet" href="style.css" />
<script src="https://cdnjs.cloudflare.com/ajax/
浏览 0提问于2015-09-28得票数 4
回答已采纳
我想做的是有一张背景图片，为了简单起见，假设这是一张房子正面的图片。然后，我想让一个红色的球从一个窗口移动到另一个窗口。
**我想要有一张背景图片，并在它上面有一张图片。
**然后我希望能够准确地告诉顶部图片要去哪里。
我该怎么做呢？
我刚刚开始学习Android中的动画，还没有遇到过这样做的方法。
浏览 0提问于2011-08-24得票数 0
2回答
我是react.js的新手。我用react.js创建了一个网页，它从json文件(文件在服务器上)获取数据并显示出来。
我希望json文件中的更改应该反映在网页中，而不需要重新加载页面，所以我使用了以下代码：
(这不是完整代码)
getInitialState: function() {
return {data: []};
},
componentDidMount: function() {
this.loadFromServer();
setInterval(this.loadFromServer, 2000);
}
和loa
浏览 5提问于2016-01-09得票数 1
回答已采纳
2回答
CreateFolder.js
嗨！！我正在尝试循环一个js树对象，用为childs元素创建一个文件夹。
我想我把这个问题弄错了。
我的递归函数正在运行，如果父函数有childs，如果这是true，则循环他的子程序，如果其子函数不是父函数，我想用这个子id创建文件夹。
问题是当我看到控制台时，首先有所有的打印“-”
API工作得很好，这会创建我的6个文件夹，这段代码的问题是当我循环我的原始树时，它有400个childs，我需要创建这400个文件夹，但是回调不起作用，这就创建了大约60个文件夹，并且有很多403个错误。我想在短时间内会有很多电话。
我试图用超时或函数异步调用函数addFolder
浏览 6提问于2022-05-19得票数 0
回答已采纳
4回答
我想输出这个JSON数据
我正在努力寻找一种方法来输出我从Firebase中提取的数据，主要是因为我不知道如何选择“date”对象中的对象。Firebase自动生成以下密钥：-LMgzJGM78f0BHbPf8cc。
我无法输出上面命名的对象的属性^我尝试过使用嵌套的for(in)循环。
下面是我目前使用的代码：
从数据库中提取数据
componentDidMount() {
axios.get('./tasks.json')
.then(response => {
const fetchedTasks = [];
f
浏览 0提问于2018-09-25得票数 3
回答已采纳
我正在做一个项目，我从json文件中读取对象，然后显示这些数据。 我试图向每个对象显示一个图像，所以我将pass放在json文件中，如下所示： "image": "../camera.png" 然后我使用map函数来读取对象并显示它。 items.map(eachitem => {
*..//code statments*
eachitem.image=require(eachitem.image)
}); 下面是错误： 未捕获的错误:找不到模块'../camera.png‘ 我确信路径是正确的，因为在我将它放入json文件之前，它工作正常，所以
浏览 28提问于2019-03-14得票数 0
我有一个ReactJS应用程序
( A)读取描述表单结构的JSON输入
( B)从这个JSON输入动态生成一个表单(使用document.createElement(..))
JSON看起来如下所示：
{
formElements: [
{
id: “dd1”,
type: “dropdown”,
options: [ {value: “first”}, {value: “second”}]
},
{
id: “tf1”,
type: “textfi
浏览 1提问于2017-08-24得票数 0
我在显示从api调用中检索到的嵌套数组数据时遇到问题。JSON数据格式类似于：
[
{
pageNo: 1
TotalRecordsCount: 8000,
Items: [
{
id: 1,
subject: "ACCOUNTING",
campus: "campus A"
},
{
id: 1,
subject: "ACCOUNTING",
campus: "campus A"
},
...
}
]
编辑数据格式
浏览 0提问于2018-11-15得票数 2
回答已采纳
1回答
我有一组图像保存在我的消防站文档中。我想以幻灯片的形式显示所有的图片，我发现这个反作用包可以做到这一点，react-simple-image-slider。
我的图像以这种方式保存在消防局里：
现在我以这种方式检索它们，以便将它们添加到滑块中：
const [imgUrls, setIMGUrls] = useState([]);
const imageList = []
firebase.firestore().collection("Properties").where("propertyID", "==", propID).
浏览 4提问于2022-02-23得票数 1
回答已采纳
2回答
这是我从websocket接收的json对象。有时，我接收数据变量中的单个对象&有时接收多个对象。
{"table":"orderBookL2","action":"update","data":
[{"symbol":"XBTU17","id":28499951430,"side":"Sell","size":97140},
{"symbol":"XBTU17","id&
浏览 0提问于2017-09-01得票数 0
2回答
嗨，我是新来的，如果我错过了一些明显的事情，我会提前道歉。在使用map函数时，我在从json返回链接时遇到问题。我一直试图使用map函数返回json文件中数组中的几个链接，但我似乎做错了什么。我想通过数组“图像”，并获得每个链接，并打印在控制台(目前)。我稍后将使用它来显示图像)。下面是使用以下代码的结果:如果我执行file.images，它将返回以下内容：(我不知道为什么要打印两次)以下是我的代码
import React, { Component } from 'react';
// Project Detail Class
class ProjectDetail ex
浏览 2提问于2020-12-31得票数 0
回答已采纳
在默认情况下，etopo背景图片的分辨率非常低。怎样才能获得高分辨率的背景？
浏览 6提问于2013-12-25得票数 5
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
