заполнение изображения с использованием process.env.PUBLIC_URL - PullRequest
Новая
       8

заполнение изображения с использованием process.env.PUBLIC_URL

0 голосов
/ 17 сентября 2018

Я делаю проект для заполнения изображения. Я уже сохранил путь в базе данных. и здесь я использую 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

заранее спасибо

1 Ответ

0 голосов
/ 17 сентября 2018

Вы должны использовать пакет 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');
...