无法在 NextJS React 组件中获取背景图像渲染 [已解决但无法解释]

Posted 2023-03-07

技术标签:

【中文标题】无法在 NextJS React 组件中获取背景图像渲染 [已解决但无法解释]【英文标题】：Unable to get background images rendering in NextJS React components [solved but unexplained] 【发布时间】：2021-05-18 23:23:57 【问题描述】：

我正在努力使用 Typescript 和 Tailwind 在 NextJs 中的元素上渲染背景图像。我认为这不是打字稿问题，因为我没有收到错误或 IntelliSense 警告。我有以下代码：

var classnames = require('classnames')
import Image from 'next/image'

interface LandingPageSection

  imagedata: imagedata,
  children?: React.ReactNode


interface imagedata

  src: string,
  width: number,
  height: number,
  alt: string


export default function Section( imagedata : LandingPageSection)

// var styleatt=backgroundImage: `url($imagedata.src)`


  return (

<div className=classnames("shadow bg-white border border-black")>
    <div className=classnames(`bg-size bg-cover bg-center`) style=backgroundImage: `url($imagedata.src)`>
      <Image src=imagedata.src width=150 height=150 alt=imagedata.alt>
      </Image>

        <div className=classnames("p-4 h-32 flex items-end text-black")>
            <h3 className=classnames("mb-2")>Card Title</h3>
        </div>
    </div>
    <div className=classnames("p-4")>
        <p className=classnames("text-grey-600 text-sm)")>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
            ligula eget dolor.
            Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
            mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. </p>
        <div className=classnames("mt-4")>
            <a href="#" className=classnames("no-underline mr-4 text-blue-500 hover:text-blue-400")>Link 1</a>
        </div>
    </div>
</div>
  )

Chrome 开发工具告诉我 ==>

element.style 背景图像：url（./images/着陆页图像/Top_banner/Top_banner_face_leaves14690559.jpeg）；

悬停时 ==> '无效的属性值'。

为什么它无效，我怎样才能使它有效？有人说您必须将图像导入顶部，但我不知道为什么需要这样做，我不能这样做，因为它必须根据道具而有所不同。

我从 this webpage 找到了一个顺风模板，我想适应 Next 和 TypeScript，并且我预见在我继续项目时需要背景图片

我理解为什么该模板网站使用内联样式，因为它是描述您需要做的最简洁和完整的方式，但是在线反应社区和教育网站中的那些似乎都喜欢内联样式特定的目标，但 jsx/tsx 或其他地方的内联样式是我想尽可能避免的事情。如果必须的话，我宁愿使用类和框架以及外部样式表，但这让我想到可能需要内联样式才能获得根据道具而变化的动态图像。他们还能如何变化？你不能动态地将路径传递给样式表，所以我想这可能是唯一的方法。但这仍然不能解释为什么尽管我的代码有效，但该属性没有呈现，并且关于该主题的文档很少（这有点令人惊讶）。

谢谢！

编辑：

是空格。感谢 aegatlin 指出这一点。

尽管如此，即使我传递如下字符串并且字符串语法可以很好地加载图标图像，它也会中断。有些东西是不同的，无论是由于内联样式还是道具的传递，我很好奇是什么，但修复很容易。将文件夹重命名为没有空格。

import Head from 'next/head'
import Infobar from '../components/Infobar'
import Section from '../components/Section'
import styles from '../styles/LandingPage.module.scss'
var classnames = require('classnames')

export default function LandingPage()

  return (
    <div className=styles.container>
      <Head>
        <title> Acme Widgets| FREE TRIAL</title>
        <link rel="icon" href="/images/Landing page images/Logo/Logo_D logo.png" />
      </Head>
      <main className=classnames(`$styles.w99`)>
        <Infobar>
        </Infobar>

        /* top banner */
        <Section imagedata=src:"/images/Landing page images/Top_banner/Top_banner_face_leaves14690559.jpeg", height:50, width:50, alt:"woman's face"> 
        </Section>

        /* second banner */
        <Section imagedata=src:"/images/Landing page images/Second_banner/cerreal2_large_1545151190.png", height:50, width:50, alt:"bowl of cereal with fruit"> 
        </Section>

        /* etc */

      </main>

    </div>
  )

这是我从中传递字符串的地方。没错，有

【问题讨论】：

【参考方案1】：

很可能您的imagedata.src 字符串值无效。你能提供一个示例字符串吗？

src 值必须是有效的 URL。它是一个静态文件，需要从您的后端提供或从其他在线位置提供。

如果您使用的字符串类似于您在问题中显示的带有删除线文本的字符串，那么由于文件路径中有空格，这是一个无效的 URL。

最后，在 NextJS 中，确保您在 /public 目录中提供静态文件，例如图片。

【讨论】：

你对空格是正确的。我添加到我的问题中，您可以看到我正在传递一个字符串，但另一侧的字符串没有出现。我找到了一个简单的解决方案：删除所有文件夹名称中的空格，现在它确实有效，但我很好奇为什么字符串没有从另一边出来。感谢您提供更多信息。我想我现在发现了你的问题。当您将字符串插入背景图像时，您将拥有`url($imagedata.src)`。这将不会在仍然为src 和href 工作的同时逃脱空格，因为它们已为您清理过。您需要为 CSS url() 函数手动清理字符串，将 ` ` 替换为 %20。那应该可以解决您的问题。但是，我建议您保留对无空格文件和目录名称的更改，这是最佳做法。当我用 %20 替换字符串中的空格时，它起作用了。当然，最好只修剪文件夹名称。是否有任何链接描述 javascript 正在做什么？我总是想知道引擎盖下发生了什么。你知道去字符串化的部分是什么吗？是浏览器、JavaScript、Node 还是 React？这是个好问题。在我看来，这很有可能是在 NextJS 中间件中完成的，尤其是他们的 webpack 捆绑器。这是我敢打赌的，尤其是当您将字符串插入到最终无法解析为src 或href 值的位置时，唯一失败发生清理的地方。我在node_modules 中寻找了一个明显命名的库来确认，但没有找到。（旁注：如果我的回答有帮助，您可以投票并将其标识为答案：D）。听起来不错。 Webpack 是我必须更加熟悉的东西。所有这些框架和库都会将密钥交给你，但不会告诉你它们在做什么——而且它们做了很多。

以上是关于无法在 NextJS React 组件中获取背景图像渲染 [已解决但无法解释]的主要内容，如果未能解决你的问题，请参考以下文章

无法在 react/next js 中获取数据，尽管能够控制台记录它

NextJS + React 上下文：如何加载数据？

带有 nextjs 的 G2Plot。堆积图不起作用

带有 Chakra UI 的 React-hook-form 未在 NextJS 中显示验证错误消息

NextJS 使用带有布局组件包装器的 React 的 Context API

nextjs 中使用 stylejsx 的背景图片