小编Arn*_*kus的帖子

我似乎无法弄清楚如何用Javascript中的字符串产生波浪。

规则：

1. 输入将始终为小写字符串。
2. 忽略空格。

预期结果：

wave("hello") => ["Hello", "hEllo", "heLlo", "helLo", "hellO"]

wave (" h e y ") => [" H e y ", " h E y ", " h e Y "]

wave ("") => []

据我所知。当前的代码会给我一个答案["hello", "hello", "hello", "hello", "hello"]。我正在考虑使用第二个for循环并以某种方式将每个新字母大写，但是我很困惑。如果答案可以避免在loop内部使用loop，我也将不胜感激O(n^2)。由于BIG O可伸缩性。

const wave = (str) => {
    if(typeof str === 'string' && str === str.toLowerCase()){
       for (let index = 0; index < str.length; index++) {
        array.push(str);
    }
    for (let index = …

我想加载 svg 图像，所以我下载了 svg-inline-loader。并使用此示例进行配置：Webpack svg-inline-loader。尝试加载 svg 文件后，我得到了这个。不使用 webpack svg-inline-loader 加载 svg 文件会给我一个错误。任何想法我该如何解决？

HTML

<img src="./svg/facebook-square-brands.svg" alt="Facebook"/>

我的 Webpack 配置文件.js

const HtmlWebPackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
  entry:{
    scripts: "./src/scripts/index.js",
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        }
      },
      {
        test: /\.html$/,
        use: [{ loader: "html-loader", options: { minimize: true } }]
      },
      {
        test: /\.(png|jpe?g)/i,
        use: [
          {
            loader: "url-loader",
            options: {
              name: "./img/[name].[ext]",
              limit: 10000
            } …

我在 CSS 方面遇到了麻烦。目前正在努力实现两件事。

1. 我需要文本始终与导航栏第一项对齐。无论浏览器宽度如何，如图所示。 。

2. 我需要使图像整个右侧为全宽。所以它的宽度应该与导航栏背景的宽度相同。基本上宽度应该是整个右侧。

我尝试使用包装器。但这似乎不是包装器在这里的正确解决方案。老实说，我认为我缺乏解决这个问题的具体知识。所以我无法产生并尝试新的想法。

图像可视化

export const NavbarWrapper = styled.div`
  margin-right: auto;
  margin-left: auto;
  max-width: 600px;
  padding-right: 24px;
  padding-left: 24px;
`;


const ContainerStyled = styled.div`
  .content_container {
    display: flex;
  }

  .img {
    width: 100%;
  }
`;

export default function App() {
  return (
    <ContainerStyled>
      <Navbar />
      <NavbarWrapper>
        <div className="content_container">
          <p className="title">
            This should be responsive to navbar on all sizes
          </p>
          <img className="img" src="/image.jpg" alt="grey bridge" />
        </div>
      </NavbarWrapper>
    </ContainerStyled>
  );
}

可重现的示例为了进行检查，我建议单击 codeSandbox 浏览器上的第三个按钮以获得更好的查看体验。