如何在反应组件中导入图像(. svg，. png)

我试图导入一个图像文件在我的反应组件之一。我有网络包的项目设置

这是组件的代码

import Diamond from '../../assets/linux_logo.jpg';


export class ItemCols extends Component {
render(){
return (
<div>
<section className="one-fourth" id="html">
<img src={Diamond} />
</section>
</div>
)
}
}

这是我的项目结构。

enter image description here

我已经按照以下方式设置了 webpack.config.js 文件

{
test: /\.(jpg|png|svg)$/,
loader: 'url-loader',
options: {
limit: 25000,
},
},
{
test: /\.(jpg|png|svg)$/,
loader: 'file-loader',
options: {
name: '[path][name].[hash].[ext]',
},
},

附言。我可以从任何其他远程源获得图像，但不能从本地保存的图像。JavaScript 控制台也没有给我任何错误。什么都行。我还是个新手，不知道自己做错了什么。

412591 次浏览
小开
最佳答案

尝试使用

import mainLogo from'./logoWhite.png';


//then in the render function of Jsx insert the mainLogo variable


class NavBar extends Component {
render() {
return (
<nav className="nav" style={nbStyle}>
<div className="container">
//right below here
<img  src={mainLogo} style={nbStyle.logo} alt="fireSpot"/>
</div>
</nav>
);
}
}
小开

解决了这个问题，当移动文件夹的图像与 src 文件夹。然后我转向图像(通过“ create-response-app”创建的项目)
Let image = document.createElement (“ img”) ; Src = demand (’. ./asset/police. png’) ;

小开

如果图像位于 src/asset 文件夹中，则可以使用 require并在 request 语句中使用正确的路径,

var Diamond = require('../../assets/linux_logo.jpg');


export class ItemCols extends Component {
render(){
return (
<div>
<section className="one-fourth" id="html">
<img src={Diamond} />
</section>
</div>
)
}
}
小开

您也可以使用 request 来呈现如下图所示的图像

//then in the render function of Jsx insert the mainLogo variable


class NavBar extends Component {
render() {
return (
<nav className="nav" style={nbStyle}>
<div className="container">
//right below here
<img src={require('./logoWhite.png')} style={nbStyle.logo} alt="fireSpot"/>
</div>
</nav>
);
}
}
小开 
import React, {Component} from 'react';
import imagename from './imagename.png'; //image is in the current folder where the App.js exits




class App extends React. Component{
constructor(props){
super(props)
this.state={
imagesrc=imagename // as it is imported
}
}


render(){
return (


<ImageClass
src={this.state.imagesrc}
/>
);
}
}


class ImageClass extends React.Component{
render(){
return (


<img src={this.props.src} height='200px' width='100px' />
);
}
}


export default App;
小开

我也有一个类似的需求，我需要导入。Png 图像。我已将这些图像存储在公用文件夹中。所以下面的方法对我很有效。

<img src={process.env.PUBLIC_URL + './Images/image1.png'} alt="Image1"></img>

除了以上我已经尝试使用需求以及它也为我工作。我已经在 src 目录的 Images 文件夹中包含了图像。

<img src={require('./Images/image1.png')}  alt="Image1"/>
小开

简单的方法是使用 location.source
它会归还你的领地
前男友
Http://localhost:8000
Https://yourdomain.com

然后用绳子连接。
好好享受。

<img src={ location.origin+"/images/robot.svg"} alt="robot"/>

还有图像吗？

var images =[
"img1.jpg",
"img2.png",
"img3.jpg",
]


images.map( (image,index) => (


<img key={index}
src={ location.origin+"/images/"+image}
alt="robot"
/>
) )
小开

你也可以试试:

...
var imageName = require('relative_path_of_image_from_component_file');
...
...


class XYZ extends Component {
render(){
return(
...
<img src={imageName.default} alt="something"/>
...
)
}
}
...

注意: 确保 Image 不在项目根文件夹之外。

小开

如果我们不使用“ create-response-app”，有几个步骤(webpack@5.23.0) 首先，我们应该将文件加载器安装为 devDedepencie，下一步是在 webpack.config 中添加规则

{
test: /\.(png|jpe?g|gif)$/i,
loader: 'file-loader',
}

, 然后在我们的 src 目录中，我们应该创建一个名为 Declaration ationFiles.d.ts 的文件(例如) ，并在其中注册模块

declare module '*.jpg';
declare module '*.png';

然后重新启动 dev-server。 在这些步骤之后，我们可以像下面的代码一样导入和使用图像

import React from 'react';
import image from './img1.png';
import './helloWorld.scss';


const HelloWorld = () => (
<>
<h1 className="main">React TypeScript Starter</h1>
<img src={image} alt="some example image" />
</>
);
export default HelloWorld;

可以在类型脚本中工作，也可以在 javaccript 中工作，只需将扩展名从.ts 改为.js 即可

干杯。

小开

我使用的是 User5660307应答。对于使用 response 和 nodejs 的服务器端渲染，可以在快速服务器中添加以下内容:

app.use(express.static("public"));

在 webpack.client.js 中:

module.exports = {
entry: "./src/client/client.js",


output: {
filename: "bundle.js",
path: path.resolve(__dirname, "public"),
},


module: {
rules: [
...
{
loader: require.resolve("file-loader"),
exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
options: {
name: "static/media/[name].[hash:8].[ext]",
},
},
{
test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
loader: require.resolve("url-loader"),
options: {
name: "static/media/[name].[hash:8].[ext]",
},
},
],
},
};
小开

若要使用变量动态导入图像，可以使用以下方法:

  const imageName = "myImage.png"
const images = require.context('../images',true);
const [imgUrl, setImgUrl] = useState('');


useEffect(() => {
if (images && imageName) {
setImgUrl(
images(`./${imageName}`).default
);
}
}, [imageName,images]);


...


<img src={imgUrl} />
小开

创建一个文件夹，并将其命名为 images.ts或 images.js，在您的资产文件夹或任何您希望的地方。

使用 export {default as imageName} from 'route'语句导出文件夹中的所有图像。

export { default as image1 } from "assets/images/1.png";
export { default as image2 } from "assets/images/2.png";
export { default as image3 } from "assets/images/3.png";
export { default as image4 } from "assets/images/4.png";

然后使用 import {imageDefaultName} from 'route'导入图像

import {image1,image2,image3,image4} from 'assets/images'


<img src={image1} />
<img src={image2} />
<img src={image3} />
<img src={image4} />

或者

import * as images from 'assets/images'


<img src={images.image1} />
<img src={images.image2} />
<img src={images.image3} />
<img src={images.image4} />

提交答案