Как установить полноэкранное фоновое изображение, используя стиль React

Question

Я пытаюсь сделать что-то очень простое в React, но у меня проблемы. Я хочу установить изображение в качестве фона полного окна моего сайта.

С помощью стилей CSS мне удалось заставить изображение появляться. Но у меня были проблемы с настройкой изображения в качестве фона полного окна. Поэтому я попробовал свои силы в стиле React.

import React, { Component } from "react";
import logo from "./logo.svg";
import code from "./code.jpg";
import "./App.css";

function App() {
  var styles = StyleSheet.create({
    bgImage: {
      flex: 1,
      flexDirection: "row",
      justifyContent: "center",
      alignItems: "stretch",
      resizeMode: "stretch"
    }
  });
  return (
    <React.Fragment>
      <Image
        source={require("image!background")}
        style={styles.bgImage}
        alt="background"
      >
        pizza
      </Image>
    </React.Fragment>
  );
}

export default App;

Я довольно новичок в React. Спасибо всем, кто может помочь мне понять, что происходит!

reactjs

0

McFloofenbork 30 Май 2019 в 05:30

Answer 1

  <Image
    source={require("image!background")}
    style={styles.bgImage}
     width="100%"
    alt="background"
  >

Редактировать:

Да, это правда, вы на самом деле не определили <Image />, откуда это?

Вы хотели использовать элемент html <img />. Все прописные элементы зависят от конкретной реакции и не могут быть зарегистрированы глобально, поэтому вам нужно импортировать этот <Image /> компонент здесь, где бы он ни был определен в вашем приложении.

Вторая ошибка также действительна. что вы пытаетесь сделать с помощью синтаксиса "изображение! фон"

Насколько я знаю, это неверный синтаксис. «!» обычно означает «нет» в условном выражении. Такие как

2 !== 3

Или

2 is not equal to 3

0

iqbal125 30 Май 2019 в 18:22

Answer 2

Вы можете использовать это CSS

var styles = StyleSheet.create({
    bgImage: {
      backgroundRepeat:'no-repeat',
      backgroundSize:'cover',
      height:'100%',
      backgroundPosition:'bottom' 
    }
  });

0

ravibagul91 30 Май 2019 в 05:35

Как установить полноэкранное фоновое изображение, используя стиль React

2 ответа

Похожие вопросы

Новые вопросы

reactjs