[英]Can't display background image in node js
我正在为我必须使用 node.js 服务器进行的测试构建一个简单的网页。 我可以通过 src 轻松包含图像,如下所示:
<img src="assets/young-woman.jpg">
但是,当我尝试这样做时:
style="background-image: url(assets/young-woman.jpg);"
......它不起作用。
我已尝试遵循此问题的各种解决方案,例如: https : //github.com/webpack-contrib/css-loader/issues/256和此Webpack - 背景图像未加载但没有一个解决方案适合我。
如果我通过 CSS 这样做,它也可以正常工作:
.element {
background-image: url(../assets/young-woman.jpg);
}
显然我的 webpack.config 文件肯定有问题?
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const webpack = require('webpack');
const path = require('path');
module.exports = {
entry: {
app: './src/index.js',
},
devServer: {
contentBase: './dist'
},
devtool: "source-map",
module: {
rules: [
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [{
loader: "css-loader", options: {
sourceMap: true
}
}, {
loader: "sass-loader", options: {
sourceMap: true
}
}],
publicPath: '../',
})
},
{
test: /\.(png|jp(e*)g|gif)$/,
use: [{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'img/'
}
}]
},
{
test: /\.(html)$/,
use: {
loader: 'html-loader',
options: {
attrs: [':src']
}
}
},
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['env']
}
}
}
]
},
plugins: [
new ExtractTextPlugin({
filename: "css/[name].[contenthash].css",
}),
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
template: 'src/index.html',
inject: 'body',
filename: 'index.html'
}),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
Popper: ['popper.js', 'default'],
Util: "exports-loader?Util!bootstrap/js/dist/util",
Dropdown: "exports-loader?Dropdown!bootstrap/js/dist/dropdown",
})
],
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist'),
publicPath: ''
}
}
当我尝试在浏览器中加载资源时,我得到了Cannot GET /assets/young-woman.jpg
我试过安装 express,但这对我也不起作用,我收到了关于fs的错误。 我似乎无法理解这一点。 也许是我的设置有问题?
提前致谢
javascript(部分)
const express = require("express");
const bodyParser = require("body-parser");
const request = require("request");
const https = require("https");
const app = express();
app.use(express.static("public")) ;
app.use(bodyParser.urlencoded({extended: true}));
app.get("/", function(req, res){
res.sendFile(__dirname + "/index.html");
});
app.listen(3000, function() {
console.log("Server started on port 3000");
});
在项目内部创建一个文件夹“public”,其中包含文件夹 css/style.css + image,只需粘贴到 css 文件夹中即可。 index.html 头文件调用:
<link rel="stylesheet" href="css/style.css">
(+ 从正文调用 javascript)和 css 代码:
body{
background: url("image.jpg");
background-repeat: no-repeat;
background-size: cover; etc. }
它有效!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.