这个 \'.src\' 在下一个 js 中做什么？答案

【问题标题】：What does this '.src' do here in next js?这个 \'.src\' 在下一个 js 中做什么？
【发布时间】：2023-01-20 17:23:33
【问题描述】：

这里我在 Next js 中设置背景图片。我在这里找到了一个解决方案，可以像这样在末尾添加 .src

import bgImg from '../public/images/Error/BG.png';

 <Layout style={{ backgroundImage: `url(${bgImg.src})`}}> </Layout>

我不知道bgImg.src中的src是做什么的？。请解释。

【问题讨论】：

附加到“bgImg”的“.src”指的是图像的来源。具体来说，就是指向图片文件的路径。在 Layout 组件中使用“backgroundImage”属性时这是必需的，因为它需要有效的 URL 或文件路径才能设置背景图像。

标签： css reactjs next.js

【解决方案1】：

如果你 console.log(bgImg)

您会发现输出语法类似于：

 bgImg: {
    src: '...',
    height: 1028,
    width: 1013,
    blurDataURL: '...'      
  }

所以你基本上是用点符号访问图像源对象值。

【讨论】：

【解决方案2】：

import React from 'react';
import ReactDOM from 'react-dom/client';

function App() {
  return (
    <div style={{backgroundImage: `url()`}}>
      Hello World!
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);

在 backgroundImage 之后：当您在 url .src 之后的括号内写入时，定义了将要拍摄图像的来源

【讨论】：