我试图创建一个图像渲染为“砖”或使用内联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元素似乎被捕获,但图像不会出现。任何想法,我能试试吗?
您需要要求您的相似图片,
function getUrl(name) {
let string = require(`./images/${name}.jpg`);
return string
}
在这个函数中,字符串变量是多余的。所以,你可以直接返回要求。
为什么这个问题与需要解决?
如果我们想(在你的问题等)使用,而不需要,我们需要把我们的资产(图像)输出目录(这是在您的捆绑(的WebPack)配置中定义)。如果你移动你的图像输出目录,你的代码应该工作。
但在大项目,通常我们使用文件加载程序或URL装载机我们的资产文件。所以,如果你使用文件加载程序或URL装载机,应使用需要导入的静态图像。
镜像文件(要求)都解决了像JS模块解决。
哪里是你的图片文件夹?确保您的图片文件夹是公用文件夹而不是src文件夹内。
root
├── public
│ └── images
└── src
└── index.js