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

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

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

Недостаточно подробностей, чтобы помочь вам. Каково содержание вашего файла env? А без process.env.PUBLIC_URL пробовали? Если да, то работает ли? Какое содержимое у вашего evArray?

Thomas Lombart 17.09.2018 14:40

это путь ... извините за позднее обновление. прямо сейчас я обновил его выше

rnr 17.09.2018 14:42

Если заменить process.env.PUBLIC_URL прямо на свой путь, это сработает?

Thomas Lombart 17.09.2018 14:43

я .. это работает ... спасибо

rnr 17.09.2018 14:46

Привет, ты пользуешься create-react-app?

t3__rry 17.09.2018 14:49

Значит, с process.env.PUBLIC_URL что-то не так. Вы пробовали использовать dotenv?

Thomas Lombart 17.09.2018 14:49

нет ... я не использовал тот

rnr 17.09.2018 15:06
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
7
2 026
1

Ответы 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.info(process.env.PUBLIC_URL);

Результирующий пакет:

console.info('127.0.0.1');

Другие вопросы по теме