Question

render(){
        const { classes } = this.props;
        const { imageDescription } = this.props.imgDesc;
        const { currentIndex } = this.state;

        var fullPath = `../images/Large/${(imageDescription[currentIndex]).imagePath}.jpg`;
        console.log("Fullpath: "+fullPath);

        return (
            <div style={{ 'background-image': "url(" + require(fullPath) + ")" }}>
            </div>

我有一个返回带有背景图像的div的组件，但是当它启动时显示错误，找不到模块'../images/Large/homeTecno.jpg'。但是，当我在console.log语句的输出中更改require中的变量fullPath时，它起作用了吗？

Answer 1

这是因为require仅用于导入javascript实体（类，对象，函数等），而不用于图像。设置背景图像时，只应输入字符串，而不是对象。这就是您的第二个解决方案起作用的原因。

请注意，您还可以使用对象定义样式属性，这些属性用camelCase编写。

鉴于您的图片可以通过yourdomain.com/images/Large/{...}.jpg访问。你应该做得很好

const path = (imageDescription[currentIndex]).imagePath;
const fullPath = `url(/images/Large/${path}.jpg)`;
return (
    <div style={{ backgroundImage: fullPath }} />
);

或者更快一点

const path = (imageDescription[currentIndex]).imagePath;
const backgroundImage = `url(/images/Large/${path}.jpg)`;
return (
    <div style={{ backgroundImage }} />
);

之所以有效，是因为将对象写为{ object }等效于写{ object: object }

在React中为div添加背景图片？

1 个答案: