javascript - 引用图片路劲问题
问题描述
图片的引用:
<img src='https://www.haobala.com/assets/image/setting.png'/>
目录结构:
写的相对路劲,为什么图片没有显示出来?console提示:
webpack:
var path = require('path');var webpack = require('webpack');var HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = { entry: ['react-hot-loader/patch','webpack-dev-server/client?http://0.0.0.0:3000','webpack/hot/only-dev-server','babel-polyfill','whatwg-fetch','./src/index' ], devServer: {hot: true,contentBase: path.resolve(__dirname, 'dist'),port: 3000,host: '0.0.0.0',publicPath: '/',historyApiFallback: true,disableHostCheck: true,proxy: { '/agent': {target: 'http://dn4:19000',changeOrigin: true, }, '/api': {target: 'http://dn4:19989',changeOrigin: true, }, '/sign': {target: 'http://dn4:19000',changeOrigin: true, }, '/file': {target: 'http://dn4:19000',changeOrigin: true, },} }, output: {path: path.join(__dirname, 'dist'),publicPath: '/',filename: 'app.[hash].js' }, devtool: 'eval', module: {rules: [ {test: /.js$/,exclude: /node_modules/,loader: 'babel-loader',options: { presets: [['es2015', {'modules': false}],'stage-0','react' ], plugins: ['transform-async-to-generator','transform-decorators-legacy',['import', {'libraryName': 'antd', 'style': true}] ]} }, {test: /.scss|css$/,use: [ 'style-loader', 'css-loader', 'postcss-loader', 'resolve-url-loader', 'sass-loader?sourceMap'] }, {test: /.less$/,use: [{ loader: 'style-loader' // creates style nodes from JS strings}, { loader: 'css-loader' // translates CSS into CommonJS}, { loader: 'less-loader', options: {modifyVars: { 'primary-color': '#0183ff', 'font-size-base': '16px',} } // compiles Less to CSS}] }, {test: /.(jpe?g|png|gif|svg)$/i,use: [ 'file-loader?hash=sha512&digest=hex&name=[hash].[ext]', {loader: 'image-webpack-loader',options: { progressive: true, optimizationLevel: 7, interlaced: false, pngquant: {quality: '65-90',speed: 4 }} }] }, {test: /.woff(2)?(?v=[0-9].[0-9].[0-9])?$/,use: 'url-loader?limit=10000&mimetype=application/font-woff' }, {test: /.(ttf|eot|svg)(?v=[0-9].[0-9].[0-9])?$/,use: 'file-loader' }] }, plugins: [new webpack.NamedModulesPlugin(),new webpack.HotModuleReplacementPlugin(),new HtmlWebpackPlugin({hash: false, template: './index.hbs'}),new webpack.ContextReplacementPlugin(/moment[/]locale$/, /nb/) ]};
原因找到了:
contentBase: path.resolve(__dirname, 'dist'),
路劲应该写相对于dist的路径但是现在又有一个问题!这样写在生产环境肯定是显示不了图片的!我不打算将静态资源放在/dist下,楼下说了static文件的方法,这个应该要配置webpack,有没有朋友分享一下
问题解答
回答1:静态资源的问题已解决,解决方案:使用webpack的一个插件,生产环境编译时可以将/static目录的文件拷贝到/dist目录下
new CopyWebpackPlugin([ {from: path.resolve(__dirname, ’static’),to: path.resolve(__dirname, ’dist/static’),ignore: [’*.js’] }])
开发的时候的时候webpack-devserver配置:
contentBase: path.resolve(__dirname),publicPath: '/',
这样在代码里面只要写绝对路径/static/..就行了
回答2:你写img的文件在哪里啊? '../assets/image/setting.png'这个只有你写img的文件在components目录下才有效.
回答3:如果是使用vue-cli的webpack模板,会被转成绝对路径,如:/images/setting.png,建议将图片放在static文件夹下。
回答4:固定路径都放在/static下面把,唯一打包前打包后位置不变的地方
相关文章:
1. angular.js - 请教angularjs里html和js通信的问题2. angular.js - 我想实现打印angular $scope数据,代码如何实现呢?求教(如下图)3. angular.js - 在用会话存储传递参数时,使用angularjs冲突4. angular.js - 用angular2-cli打包项目之后,跳转路由刷新会报404的错误5. node.js - 怎么在初始化的时候使得一个子组件不加载?6. angular.js - angular-ueditor使用中,插入图片,加载完成后不更新angularmodel的问题;7. javascript - antdesign底层弹出个confirmModal。怎么获取底层的this?8. javascript - jquery中的$.post()为什么不能跨域提交数据呢?9. java - SSH框架中写分页时service层中不能注入分页类10. javascript - 关于单选框的问题,小白一枚,希望有人帮帮忙