我沒有看到我的圖片，只有 alt 屬性

Question

我不明白為什么我看不到我的圖像，我的意思是我只看到 alt 屬性而不是圖片。 這是我的代碼：

import React, {Component} from "react";

const Cards = (props) => {

    return (
        <>
            <div  id="card" className={"card text-white bg-" + props.bootstrap + " mb-3"}
                 style={{maxWidth: 200, marginRight: 10}}>
                <div className="card-header">Test</div>
                <div className="card-body">
                    <img src="test.jpg" width="200px" height="200px" className="card-img-top" alt="test" />
                    <h4 className="card-title">Description</h4>
                </div>
            </div>
        </>
    )
}

export default Cards;

而當我嘗試這種修改時，它可以工作：

import React, {Component} from "react";
import logo from './test.jpg';

const Cards = (props) => {

    return (
        <>
            <div  id="card" className={"card text-white bg-" + props.bootstrap + " mb-3"}
                 style={{maxWidth: 200, marginRight: 10}}>
                <div className="card-header">Test</div>
                <div className="card-body">
                    <img src={logo} width="200px" height="200px" className="card-img-top" alt="test" />
                    <h4 className="card-title">Description</h4>
                </div>
            </div>
        </>
    )
}

我不明白為什么這不起作用。 對我來說，這條路很好。

請問你能幫幫我嗎？

十分感謝 ！

Answer 1

每次圖像無法正確加載時都會顯示alt 。

因此，在您的情況下，后一個示例可以正常工作，因為logo實際上指向jpg圖像，並且可以在沒有alt字符串的情況下顯示圖像。 您共享的第一個示例不起作用，因為src沒有實際的 pat，它只有一個未解析為圖像的字符串，因此不會加載圖像，瀏覽器將顯示alt值。

Answer 2

在大多數情況下，圖像（靜態文件）應該存儲在您的 /public 文件夾中。

您可以在公用文件夾中創建一個圖像文件夾，然后設置src="/images/test.jpg"而不僅僅是“test.jpg”

Answer 3

你需要導入

在某些情況下，如果仍然無法正常工作，請按照我的描述檢查config文件注意：需要安裝file-loader package

import React, {Component} from "react";
import logo from './test.jpg';

const Cards = (props) => {

    return (
        <>
            <div  id="card" className={"card text-white bg-" + props.bootstrap + " mb-3"}
                 style={{maxWidth: 200, marginRight: 10}}>
                <div className="card-header">Test</div>
                <div className="card-body">
                    <img src={logo} width="200px" height="200px" className="card-img-top" alt="test" />
                    <h4 className="card-title">Description</h4>
                </div>
            </div>
        </>
    )
}

在配置文件中:: 確保定義了以下規則

module.exports = {
 // other config
 module: {
  rules: [
    // other rules
    {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader'
    },
  ]
 }
}```

Answer 4

這是因為 webpack 配置為使用 JSX 語法捆綁您的圖像和資產。 {} 中的任何內容都可以視為組件的屬性。 當它在 src 屬性中時，它成為 src 和 webpack 的屬性，而不知道該做什么。 如果您只是添加字符串，它會將源視為字符串而不是圖像。 只有將路徑從無意義的字符串轉換為 object 時，路徑本身才有意義。 您的第一種方法的替代方法可能是

<img src={require('/text.jpg')} />

這也應該有效。

Answer 5

試試這樣：

<img src="./test.jpg" ...

如果圖片在公用文件夾中，它應該可以工作。

Answer 6

答案是： <img src={require('./test.png').default} />