[英]images aren't appearing in image gallery
我正在尝试基于来自 Javascript30（ 回购链接）的 Flex 面板库创建一个游泳图像库。 当试图在浏览器中显示该站点时，图像立即 go 超出框架，我只能看到页面上五个 flex 列的背景。
我不确定为什么它们在浏览器中被向下推到视野之外，以及为什么文本（不在列方向）直到我在列中单击后才会出现。
const panels = document.querySelectorAll('.panel'); function toggleOpen() { console.log('Hello'); this.classList.toggle('open'); } function toggleActive(e) { console.log(e.propertyName); if (e.propertyName.includes('flex')) { this.classList.toggle('open-active'); } } panels.forEach(panel => panel.addEventListener('click', toggleOpen)); panels.forEach(panel => panel.addEventListener('transitionend', toggleActive));
body { box-sizing: border-box; background: lightblue; font-family: "Source Sans Pro", sans-serif; font-size: 20px; font-weight: 200; margin: 0; box-sizing: inherit; }.image-panels { min-height: 100vh; overflow: hidden; display: flex; }.panel { display: flex; background: #6B0F9C; box-shadow: inset 0 0 0 5px rgba(255, 255, 255, 0.1); color: white; text-align: center; align-items: center; transition: font-size 0.7s cubic-bezier(0.51, -0.19, 0.7, -0.11), flex 0.7s cubic-bezier(0.61, -0.19, 0.7, -0.11), background 0.2s; font-size: 20px; background-size: cover; background-position: center; flex: 1; justify-content: center; flex-direction: column; } #first-panel { background-image: url(https://picsum.photos/id/10/2500/1667); } #second-panel { background-image: url(https://picsum.photos/id/10/2500/1667); } #third-panel { background-image: url(https://picsum.photos/id/10/2500/1667); } #fourth-panel { background-image: url(https://picsum.photos/id/10/2500/1667); } #fifth-panel { background-image: url(https://picsum.photos/id/10/2500/1667); }.panel > * { display: flex; margin: 0; width: 100%; transition: transform 0.5s; flex: 1 0 auto; justify-content: center; align-items: center; }.panel > *:first-child { transform: translateY(-100%); }.panel.open-active > *:first-child { transform: translateY(0); }.panel > *:last-child { transform: translateY(100%); }.panel.open-active > *:last-child { transform: translateY(0); }.panel div p { text-shadow: 0 0 4px rgba(0, 0, 0, 0.72), 0 0 14px rgba(0, 0, 0, 0.45); font-size: 2em; }.panel div p:nth-child(2) { font-size: 4em; }.panel.open { flex: 5; font-size: 40px; }
<html lang="en"> <head> <meta charset="utf-8"> <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap" rel="stylesheet"> <link rel="stylesheet" href="styles.css"> <title>Swim Club Image Gallery</title> </head> <body> <div class="image-panels"> <div class="panel"> <div id="first-panel"> <p>Join</p> <p>This</p> <p>Quarter.</p> </div> </div> <div class="panel"> <div id="second-panel"> <p>Swimming</p> <p>Is</p> <p>Fun!</p> </div> </div> <div class="panel"> <div id="third-panel"> <p>Every</p> <p>Husky</p> <p>Is Welcome!</p> </div> </div> <div class="panel"> <div id="fourth-panel"> <p>Recreational</p> <p>Swim</p> <p>Atmosphere!</p> </div> </div> <div class="panel"> <div id="fifth-panel"> <p>Best</p> <p>Club</p> <p>To Stay Fit!</p> </div> </div> </div> <script src="index.js"> </script> </body> </html>
通过查看repo站点示例，您应该将图像背景应用于父 div，如下所示：
<div class="panel" id="first-panel">
<p>Join</p>
<p>This</p>
<p>Quarter!</p>
</div>
const panels = document.querySelectorAll('.panel'); function toggleOpen() { console.log('Hello'); this.classList.toggle('open'); } function toggleActive(e) { console.log(e.propertyName); if (e.propertyName.includes('flex')) { this.classList.toggle('open-active'); } } panels.forEach(panel => panel.addEventListener('click', toggleOpen)); panels.forEach(panel => panel.addEventListener('transitionend', toggleActive));
body { box-sizing: border-box; background: lightblue; font-family: "Source Sans Pro", sans-serif; font-size: 20px; font-weight: 200; margin: 0; box-sizing: inherit; }.image-panels { min-height: 100vh; overflow: hidden; display: flex; }.panel { display: flex; background: #6B0F9C; box-shadow: inset 0 0 0 5px rgba(255, 255, 255, 0.1); color: white; text-align: center; align-items: center; transition: font-size 0.7s cubic-bezier(0.51, -0.19, 0.7, -0.11), flex 0.7s cubic-bezier(0.61, -0.19, 0.7, -0.11), background 0.2s; font-size: 20px; background-size: cover; background-position: center; flex: 1; justify-content: center; flex-direction: column; } #first-panel { background-image: url(https://picsum.photos/id/10/2500/1667); } #second-panel { background-image: url(https://picsum.photos/id/10/2500/1667); } #third-panel { background-image: url(https://picsum.photos/id/10/2500/1667); } #fourth-panel { background-image: url(https://picsum.photos/id/10/2500/1667); } #fifth-panel { background-image: url(https://picsum.photos/id/10/2500/1667); }.panel > * { display: flex; margin: 0; width: 100%; transition: transform 0.5s; flex: 1 0 auto; justify-content: center; align-items: center; }.panel > *:first-child { transform: translateY(-100%); }.panel.open-active > *:first-child { transform: translateY(0); }.panel > *:last-child { transform: translateY(100%); }.panel.open-active > *:last-child { transform: translateY(0); }.panel div p { text-shadow: 0 0 4px rgba(0, 0, 0, 0.72), 0 0 14px rgba(0, 0, 0, 0.45); font-size: 2em; }.panel div p:nth-child(2) { font-size: 4em; }.panel.open { flex: 5; font-size: 40px; }
<html lang="en"> <head> <meta charset="utf-8"> <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap" rel="stylesheet"> <link rel="stylesheet" href="styles.css"> <title>Swim Club Image Gallery</title> </head> <body> <div class="image-panels"> <div class="panel" id="first-panel"> <p>Join</p> <p>This</p> <p>Quarter.</p> </div> <div class="panel" id="second-panel"> <p>Swimming</p> <p>Is</p> <p>Fun!</p> </div> <div class="panel" id="third-panel"> <p>Every</p> <p>Husky</p> <p>Is Welcome!</p> </div> <div class="panel" id="fourth-panel"> <p>Recreational</p> <p>Swim</p> <p>Atmosphere!</p> </div> <div class="panel" id="fifth-panel"> <p>Best</p> <p>Club</p> <p>To Stay Fit!</p> </div> </div> <script src="index.js"> </script> </body> </html>
将其他页面的内容加载到当前页面时，为什么没有出现图像？
[英]Why aren't images appearing when I load contents of a different page into the current page?
为什么图像不显示在 React Native 中？ 失败的道具类型：提供给`Image` 的道具`source` 无效
[英]Why aren't images showing in React Native? Failed prop type: Invalid prop `source` supplied to `Image`
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.