反应问题：从"./config"导入{baseUrl }

Question

导入所有内容并安装后，我复制并粘贴页面提供的代码的任何旋转木马，除此之外，我设法工作，主要问题是"baseUr"；在导入所有内容并安装后，我复制并粘贴页面提供的代码的任何转盘，除此之外，我设法工作，主要问题是"；baseUrl"；

import React, { Component } from "react";
import Slider from "react-slick";
import { baseUrl } from "./config";
export default class CenterMode extends Component {
render() {
const settings = {
customPaging: function(i) {
return (
<a>
<img src={`${baseUrl}/abstract0${i + 1}.jpg`} />
</a>
);
},
dots: true,
dotsClass: "slick-dots slick-thumb",
infinite: true,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1
};
return (
<div>
<h2>Custom Paging</h2>
<Slider {...settings}>
<div>
<img src={baseUrl + "/abstract01.jpg"} />
</div>
<div>
<img src={baseUrl + "/abstract02.jpg"} />
</div>
<div>
<img src={baseUrl + "/abstract03.jpg"} />
</div>
<div>
<img src={baseUrl + "/abstract04.jpg"} />
</div>
</Slider>
</div>
);
}
}

在此处输入图像描述

Answer 1

您只需要在项目的根目录下创建一个config.js文件，如下所示：

config.js

export const baseUrl = window.location.origin + '/img';
// 'img' is the images folder in 'public' (project_name/public/img/)

在滑块组件中

import { baseUrl } from '../config';
// '../config' instead of './config'

演示：Stacklitz