时间戳

首页 > 解决方案 > 为什么我的图片没有出现，只看到alt？

javascript - 为什么我的图片没有出现，只看到alt？

问题描述

我正在尝试在卡片内显示图片，但它不起作用...实际上我只看到属性 alt 而不是图片，但我没有看到图片...

这是我的代码：

import React, {Component} from "react";
import classes from "./cards.css"

const Cards = (props) => {
    return (
        <>
            <div  id="card" className={"card text-white bg-info mb-3"}
                 style={{maxWidth: 200, marginRight: 10}}>
                <div className="card-header">Test</div>
                    <img src="myPicture.jpg" className="card-img-top" alt="pic" />
                <div className="card-body">
                    <h4 className="card-title">This is a test</h4>
                </div>
            </div>
        </>
    )
}

export default Cards;

你知道我该怎么做才能看到我卡上的照片吗？

非常感谢您的帮助！

标签： javascriptreactjs

解决方案

如果您使用的是 webpack，请尝试以下操作：

import backgroundImage from './myPicture.jpg';

// all other code

return (
 <div>
  <img src={backgroundImage} alt="Background image" className="image" />
 </div>
)

webpack 中需要的配置：

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

您需要安装文件加载器包

推荐阅读