為什么我的圖像沒有顯示在我的反應項目中

Question

我目前正在學習一個教程，我嘗試渲染一些來自數組的圖像，如教程中所示，但沒有圖像顯示在瀏覽器中。 這是顯示我是如何做到這一點的組件。

import React from 'react';

export default function MasonryPost ({post, tagsOnTop}) {
    const style = {backgroundImage: `url("${require(`../../assests/images/${post.image}`)}")`}

    return (
        <a className="masonry-post overlay" style={style} href={post.link}>
           <div className="image-text">
               <div>
    <h2 className="image-title">{post.title}</h2>
               </div>
            </div> 
        </a>
    )
} 

當我在瀏覽器中檢查它時，而不是 url 鏈接，它顯示“對象模塊”

這是圖像應該來自的地方

import moment from 'moment'

export default [
    {
        title: 'Do you want to code?',
        date: moment().format('MMMM DD, YYYY'),
        categories: ['Beginning your journey'],
        link: '#',
        image: 'journey.jpg'
    },
    {
        title: 'Using AWS S3 for Storing Blog Images',
        date: moment().format('MMMM DD, YYYY'),
        categories: ['Cloud'],
        link: '#',
        image: 'cloud.jpg'
    },
    {
        title: 'Highest paying Programming Languages in 2020',
        date: moment().format('MMMM DD, YYYY'),
        categories: ['Tect Culture', 'Tech News'],
        link: '#',
        image: 'Tech.jpg'
    },
    {
        title: 'Brain Hacks For getting enough rest',
        date: moment().format('MMMM DD, YYYY'),
        categories: ['Brain Health'],
        link: '#',
        image: 'Brain.jpg'
    },
    {
        title: 'How to manage time while you Program',
        date: moment().format('MMMM DD, YYYY'),
        categories: ['Time Management'],
        link: '#',
        image: 'Time.jpg'
    },
    {
        title: 'Brain Hacks For Learning to Program',
        date: moment().format('MMMM DD, YYYY'),
        categories: ['Brain Health'],
        link: '#',
        image: 'Brain.jpg'
    },
]

我在網上看到了一些關於 webpack.config.js 的問題，我嘗試了他們的大部分解決方案，但問題仍然存在。

我不知道該怎么辦了。 我會很感激任何人的幫助。

Answer 1

您需要提供文件的路徑。 您正在做的是提供文件本身的數據。 您也可以將它們轉換為 base64 形式。 但我想，只刪除 require 調用就足夠了。

Answer 2

您不需要require每個圖像。 您可以簡單地使用：

const style = {backgroundImage: `url("/assests/images/${post.image}")`}

Answer 3

試試這個方法，

function MasonryPost({ post }) {
  const style = {
    background: `url("../assets/images/${post.image}") no-repeat`,
    height: "200px",
    width: "230px"
  };

  return (
    <div className="masonry-post overlay" style={style} href={post.link}>
      <div className="image-text">
        <div>
          <h2 className="image-title">{post.title}</h2>
        </div>
      </div>
    </div>
  );
}

工作代碼：- https://codesandbox.io/s/competent-bash-o34kd?file=/src/App.js:1452-1851

Answer 4

您可以使用此代碼而不是您的代碼：

import React from 'react';
    
render(){
  return (
        <div style ={{backgroundImage: url("YourPath")}}>
            <a href={post.link}>
               <div className="image-text">
                   <div>
                       <h2 className="image-title">{post.title}</h2>
                   </div>
                </div> 
            </a>
       </div>
        )
    }