ReactJS不显示和backgroundImage内嵌CSS

问题描述 投票:0回答:2

我试图创建一个图像渲染为“砖”或使用内联CSS与ReactJS“卡”的一个组成部分。不过,我想不通为什么图像不显示。我是新来ReactJS,所以这可能是一个简单的依赖包我还没有安装 - 但请指教!

我自举从创建反应的应用程序内这个项目。

我检查URL配置,内嵌CSS语法,并检查我的本地服务器上的页面,但我似乎无法弄清楚,为什么不能显示图像。我试着加上“要求”各地的网址,但似乎并没有工作(除非有我需要设置时需要使用的URL以特定的方式?)。我也试着使用的图像标签代替,但其在实际图像加载失败所显示的微小的默认图片图标。

import React from 'react';

function getUrl(name) {
  let string = `./images/${name}.jpg`;
  return string
}

function HorizontalTile(props) {

  let name = props.name;
  let position = props.position;
  let size = props.size;

  let url = getUrl(name);

  const divstyle = {
    height: "50vh",
    width: "100%",
    backgroundImage: `url(${url})`,
    backgroundPosition: `${position}`,
    backgroundSize: `${size}`,
    backgroundRepeat: "no-repeat",
    WebkitTransition: "all",
    msTransition: "all",
  };

  return (
    <div style={divstyle} alt={name}></div>
  )
}


export default HorizontalTile

我打电话这样这个组件,在同一目录中的其他JS文件。 。 。

import HorizontalTile from './HorizontalTile';
.
.
.
<HorizontalTile name="proj-hor-1" position="center" size="cover" />
.
.
.
export default Photos

间距加载罚款和所有的CSS元素似乎被捕获,但图像不会出现。任何想法,我能试试吗?

javascript css reactjs
2个回答
1
投票

您需要要求您的相似图片,

function getUrl(name) {
  let string = require(`./images/${name}.jpg`);
  return string
}

在这个函数中,字符串变量是多余的。所以,你可以直接返回要求。

为什么这个问题与需要解决?

如果我们想(在你的问题等)使用,而不需要,我们需要把我们的资产(图像)输出目录(这是在您的捆绑(的WebPack)配置中定义)。如果你移动你的图像输出目录,你的代码应该工作。

但在大项目,通常我们使用文件加载程序或URL装载机我们的资产文件。所以,如果你使用文件加载程序或URL装载机,应使用需要导入的静态图像。

镜像文件(要求)都解决了像JS模块解决。


0
投票

哪里是你的图片文件夹?确保您的图片文件夹是公用文件夹而不是src文件夹内。

root
├── public
│   └── images
└── src
    └── index.js
© www.soinside.com 2019 - 2024. All rights reserved.