Question

我正在做一个填充图像的项目。我已经将路径存储在数据库中。在这里我正在使用process.env.PUBLIC_URL填充数据，但我没有填充该图像。我写的代码如下。

代码：-

export default class Sliders extends Component {
  constructor(props){
    super(props)
    this.state={
      evArray:[],
    }
  }

  componentDidMount(){
    axios.get('/getallevlst')
    .then(res=>{
      this.state.evArray = res.data
      this.forceUpdate()
    })
  }
  render() {
    console.log(this.state.evArray)
    const settings = {
      className: "center",
      centerMode: true,
      infinite: true,
      centerPadding: "24%",
      slidesToShow: 1,
      speed: 5000,
      width:"851px",
      infinite: true,
      slidesToScroll: 1,
      autoplay: true,
      autoplaySpeed: 7000,
      nextArrow:false
    };
    return (
      <div className="r-slider-main-section">
        <Slider {...settings}>
        {this.state.evArray.map(item=>
          <div className="r-slider-spacer">
          <a href="#" onClick={this.props.events}>
            <Card style={{borderRadius:"17px"}}>
            <img src={process.env.PUBLIC_URL + item.logo} onerror={this.src=process.env.PUBLIC_URL + '/assets/img/tos_logo.png'} className="r-test1" />
            {/* <img src={image2} className="r-test1" /> */}
            <img src={image1} className="r-test2"></img>
            <img src={calender} className="r-calender-place"></img>
            <text className="r-text-month">DEC</text>
            <text className="r-text-date">1</text>
            <text className="r-text-event-name">@{item.name}</text>
            <text className="r-text-event-detail">{item.event_type} featuring {item.name}</text>
            <div className="r-rectangle-icon"><div class="r-rectangle"><div className="r-rectangle-text">{item.amount}</div></div></div>
          </Card></a>
        </div>)}
        </Slider>
      </div>
    );
  }
}

我给出的路径是/react/public/assets/image/image.jpg

预先感谢

Answer 1

您必须使用dotenv-webpack包来加载.env文件并从整个React应用程序访问它们。

用法

安装：

npm i -D dotenv-webpack

创建一个.env文件：

PUBLIC_URL=127.0.0.1

将其添加到您的Webpack配置文件中：

const Dotenv = require('dotenv-webpack');

module.exports = {
  ...
  plugins: [
    new Dotenv()
  ]
  ...
};

在您的代码中使用：

console.log(process.env.PUBLIC_URL);

结果包：

console.log('127.0.0.1');

使用process.env.PUBLIC_URL

1 个答案: