отреагировать маршрутизатор - PullRequest
0 голосов
/ 20 января 2020

Только что возникла проблема с реакцией маршрутизатора <Link>, когда я делаю div с фоном, он не показывает изображение, но если я закомментирую ссылку, фон может появиться, кто-нибудь столкнулся с той же проблемой?

       <Link to={{
                    pathname: "/productDetail",
                    search: "?productId=" + props.product.productid
                }}>
                <div
                    className="image"
                    style={{
                        backgroundImage: `url(correctURL)`
                    }}
                />
       </Link>

URL-адрес правильный, я могу гарантировать причину, когда я закомментирую ссылку, он работает нормально.

Обновление: не работает один:

  <Link to={{
                    pathname: "/productDetail",
                    search: "?productId=" + props.product.productid
                }}>
                <div
                    className="image"
                    style={{
                        backgroundImage: `url(correctURL)`
                    }}
                />
   </Link>

sass file:
   .image { 
      width:100%;
      height: 100%;
      background-color: white;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      margin-bottom: 5px;
    }

Вот мое решение:

  <Link className="link" to={{
                    pathname: "/productDetail",
                    search: "?productId=" + props.product.productid
                }}>
                <div
                    className="image"
                    style={{
                        backgroundImage: `url(correctURL)`
                    }}
                />
  </Link>

sass file:
link {
    text-decoration: none;
    width: 100%;
    height: 100%;
    .image { 
      width:inherit;
      height: inherit;
      background-color: white;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      margin-bottom: 5px;
    }

1 Ответ

0 голосов
/ 20 января 2020

Это то, как вам нужно определить и поставить некоторую высоту.

       <div 
        style={{
        backgroundImage:`url('https://images-eu.ssl-images-amazon.com/images/I/41lMD31ltzL.jpg')`,
        height:'500px'}}>
        </div>

Или

let myUrl = 'https://images-eu.ssl-images-amazon.com/images/I/41lMD31ltzL.jpg';

определить так

        <div 
        style={{backgroundImage:`url(${myUrl})`,
        height:'500px'}}>
        </div>
...