发新贴  快速回复

webpack在页面中用img标签引入图片,打包后图片路径错误?????

juntaoshuai
2018-03-04 21:00

这个问题困扰好几个月了,没解决,就因为这个问题没解决,webpack放弃学下去了。

现在问题是: webpack在页面中用img标签引入图片,打包后图片路径 还是没变,原样输出了(<img src="./src/common/img/test.jpg" alt=""> 因为打包后不存在src目录 ,所以出错)

我把代码打包上传,你们下载后 先npm install ,安装依赖,然后启动用 npm start , 打包用 npm run dev,

index.html:

<p>我是直接在页面中用img标签加入的图片</p>

<img src="./src/common/img/test.jpg" alt="">

<div class="box" id='root'></div>

webpack.config.js 如下:

const path = require('path');

const webpack = require('webpack')

const HtmlWebpackPlugin = require('html-webpack-plugin')

const ExtractTextPlugin = require('extract-text-webpack-plugin')

const cleanWebpackPlugin = require('clean-webpack-plugin')

const UglifyJSPlugin = require('uglifyjs-webpack-plugin')

 

module.exports = {

    entry: './src/app.js',

    output: {

        path: path.resolve(__dirname, 'dist'),

        filename: "static/js/main.js",

        //所有资源的基础路径,而且一定要以 / 结尾

        publicPath: ""

    },

    plugins: [

        new HtmlWebpackPlugin({

            template: './src/index.html',

            filename: 'index.html'

        }),

 

        new cleanWebpackPlugin(['dist']),

 

        new ExtractTextPlugin({

            filename: 'static/css/[name]-[hash:4].css'

        }),

        new UglifyJSPlugin() //js压缩

 

 

    ],

    module: {

        rules: [{

                test: /\.js$/,

                use: [{

                    loader: 'babel-loader'

                }],

                exclude: [path.resolve(__dirname, 'node_modules')]

 

            },

            /*{

            test: /\.css$/,

            use: ['style-loader','css-loader']

            },*/

            {

                test: /\.css$/,

                use: ExtractTextPlugin.extract({

                    fallback: 'style-loader',

                    use: [{

                        loader: 'css-loader',

                        options: {

                            minimize: false //css压缩

                        }

                    }]

                })

            },

            {

                test: /\.(jpg|png|gif|jpeg)$/,

                use: [{

                    loader: 'url-loader',

                    options: {

                        //大于10KB的图片将被生成base64

                        //loader 后面 limit 字段代表图片打包限制,这个限制并不是说超过了就不能打包,而是指当图片大小小于限制时会自动转成 base64 码引用。上例中大于10000字节的图片正常打包,小于10000字节的图片以 base64 的方式引用。

                        limit: 10000,

                        name: 'static/img/[name]_[hash:8].[ext]'

                    }

                }]

            },

            {

                test: /\.(ttf|eot|woff|woff2|svg)$/,

                use: ['file-loader']

            }

 

            /*{

                test: /\.(html)$/,

                use: [{

                    loader: 'html-loader',

                    options: {

                        attrs: ['img:src', 'img:data-src']

                    }

                }]

            }*/

 

        ]

    },

 

    devServer: {

        open: true,

        port: 8080,

        publicPath: '/'

    }

};

麻烦你们把代码 下载下来,把项目跑起来,看下问题吧, 我照着视频写的,却不行,我知道 解析页面中的图片,加这个配置:

            {

                test: /\.(html)$/,

                use: [{

                    loader: 'html-loader',

                    options: {

                        attrs: ['img:src', 'img:data-src']

                    }

                }]

            }

但是我一加上去,就报错,如下:

我暂且 把这段配置注释掉了,我QQ是 595979939,如果有描述不清楚的,请加我Q找我, 跪求 大神们帮忙解决下,非常感谢!!!??? 

附件下载:
 
 
2017年2月8日

你直接用vue的脚手架,看看有没有问题,vue的脚手架这些都配置好了,如果vue的没有问题,你就可以对着vue那些配置,看看你哪里写错了。

2018-03-05 08:46  回复本帖
Flowke

看你的文件层级应该是路径没写对而已.  你确定路径是 './src/common/img/test.jpg' 而不是'./common/img/test.jpg' 

2018-03-05 18:12  回复本帖
juntaoshuai

Flowke 2018-03-05 18:12发表的内容:

看你的文件层级应该是路径没写对而已.  你确定路径是 './src/common/img/test.jpg' 而不是'./common/img/test.jpg' 

路径应该没错,因为我不打包运行 图片可以显示,打包了才不显示,改成你那样,两个都不显示了。
2018-03-05 19:41  回复本帖
juntaoshuai

2018-03-05 19:42  回复本帖
juntaoshuai

2018-03-05 20:15  回复本帖
juntaoshuai

页面引用的图片,图片路径webpack没处理。下面那张图片就处理了

2018-03-05 20:16  回复本帖
juntaoshuai

juntaoshuai 2018-03-05 20:15发表的内容:

打包后图片也是这样
<img src="./src/common/img/test.jpg" alt="">
所以不行。
2018-03-05 20:17  回复本帖
Flowke

html 的图片引入路径改成'./common/img/test.jpg',  然后 webpack.config.js 的 html-loader 不要注释掉, 这个 loader 需要在 html-webpack-plugin 分析模板的时候用到这个 loader. 

 

改完之后是能正常运行的.

2018-03-06 09:34  回复本帖
juntaoshuai

这个样式里 背景图 路径不对, 打开后路径是这样:http://localhost:8085/static/css/static/img/test_6f1e514d.jpg
显示 不对, 请问下 要怎么改才正确?????还想问下 路径 怎么时候用相对路径,什么时候用绝对路径(从src目录)??? 

2018-03-06 10:50  回复本帖
juntaoshuai

Flowke 2018-03-06 09:34发表的内容:

html 的图片引入路径改成'./common/img/test.jpg',  然后 webpack.config.js 的 html-loader 不要注释掉, 这个 loader 需要在 html-webpack-plugin 分析模板的时候用到这个 loader. 

 

改完之后是能正常运行的.

果然可以了,太感谢了,非常感谢!还有个问题,看下面的评论:
2018-03-06 11:00  回复本帖
juntaoshuai

css里背景图路径 不对,要怎么写才可以????非常感谢

2018-03-06 11:06  回复本帖
Flowke

juntaoshuai 2018-03-06 11:06发表的内容:

css里背景图路径 不对,要怎么写才可以????非常感谢

css 的图片不需要额外的语法引入, 使用正常的 css 语法. css-loader 会帮你正确引入的.
之前怎么引入背景图的, 现在也是一样.
2018-03-07 15:04  回复本帖
juntaoshuai

Flowke 2018-03-07 15:04发表的内容:

css 的图片不需要额外的语法引入, 使用正常的 css 语法. css-loader 会帮你正确引入的.
之前怎么引入背景图的, 现在也是一样.
解决了,加了个publicPath配置,如下:
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [{
loader: 'css-loader',
options: {
minimize: false //css压缩
}
}],
publicPath: '/'
})
}
2018-03-10 15:59  回复本帖
juntaoshuai

Flowke 2018-03-07 15:04发表的内容:

css 的图片不需要额外的语法引入, 使用正常的 css 语法. css-loader 会帮你正确引入的.
之前怎么引入背景图的, 现在也是一样.
解决了,加了个publicPath配置,如下:
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [{
loader: 'css-loader',
options: {
minimize: false //css压缩
}
}],
publicPath: '/'
})
}
2018-03-10 15:59  回复本帖
juntaoshuai

Flowke 2018-03-07 15:04发表的内容:

css 的图片不需要额外的语法引入, 使用正常的 css 语法. css-loader 会帮你正确引入的.
之前怎么引入背景图的, 现在也是一样.
解决了,加了个publicPath配置,如下:
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [{
loader: 'css-loader',
options: {
minimize: false //css压缩
}
}],
publicPath: '/'
})
}
2018-03-10 15:59  回复本帖
juntaoshuai

Flowke 2018-03-07 15:04发表的内容:

css 的图片不需要额外的语法引入, 使用正常的 css 语法. css-loader 会帮你正确引入的.
之前怎么引入背景图的, 现在也是一样.
解决了,加了个publicPath配置,如下:
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [{
loader: 'css-loader',
options: {
minimize: false //css压缩
}
}],
publicPath: '/'
})
}
2018-03-10 15:59  回复本帖
juntaoshuai

Flowke 2018-03-07 15:04发表的内容:

css 的图片不需要额外的语法引入, 使用正常的 css 语法. css-loader 会帮你正确引入的.
之前怎么引入背景图的, 现在也是一样.
解决了,加了个publicPath配置,如下:
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [{
loader: 'css-loader',
options: {
minimize: false //css压缩
}
}],
publicPath: '/'
})
}
2018-03-10 16:00  回复本帖
juntaoshuai

Flowke 2018-03-07 15:04发表的内容:

css 的图片不需要额外的语法引入, 使用正常的 css 语法. css-loader 会帮你正确引入的.
之前怎么引入背景图的, 现在也是一样.
解决了,加了个publicPath配置,如下:
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [{
loader: 'css-loader',
options: {
minimize: false //css压缩
}
}],
publicPath: '/'
})
}
2018-03-10 16:00  回复本帖
juntaoshuai

解决了,加了个publicPath 配置,完美解决,如下:

{

                test: /\.css$/,

                use: ExtractTextPlugin.extract({

                    fallback: 'style-loader',

                    use: [{

                        loader: 'css-loader',

                        options: {

                            minimize: false //css压缩

                        }

                    }],

                    publicPath: '/'

                })

            }

2018-03-10 16:00  回复本帖
登录 后才可以发表回复