img打 webpack_webpack 打包js中的img路径问题

{

test: /\.js$/,

exclude: function(path) {

// 路径中含有 node_modules 的就不去解析。

// var isNpmModule = !!path.match(/node_modules/);

// return isNpmModule;

include: [

path.resolve(__dirname, "src/assets/js"),

], // 只去解析运行目录下的 src 和 demo 文件夹

loader:'babel'

{test: /\.html$/, loader: "html" },

{

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

loader: 'file-loader',

query: {

* limit=10000 ： 10kb

* 图片大小小于10kb 采用内联的形式，否则输出图片

* */

limit: 10000,

name: 'img/[name]-[hash:8].[ext]'

}

我的loader是这么配置的在html里的图片路径是没有问题

而实际开发中可能会需要js动态替换路径的问题

这种情况是需要怎么配置呢感觉我的做法似乎不对

有实际这种需求的帮我解答下不胜感激

https://webpack.github.io/doc…

最后我找到了这个答案不知道这样的做法是不是主流

写成：

obj.src = require('../../../img/icon-qr.png');

试试吧

到时候用变量替换啊。一般就是从接口获取JSON，然后得到图片路径和名称，把这个作为参数赋值给相应的变量。

又是动态的问题。之前有听说过，可以让webpack根据变量可能出现的值来打包可能会用到的图片，不过我没实践过。

如果可能用到的图片不多，比如说三四张这样，可以先用变量(require图片后得来的图片真实路径)存起来，然后再根据实际需要把变量填到

<img>

上。类似下面这样：

var imgs['A'] = require('./img/imgA.jpg');

var imgs['B'] = require('./img/imgB.jpg');

var imgs['C'] = require('./img/imgC.jpg');

img打 webpack_webpack 打包js中的img路径问题相关推荐

(三)01 -Vue项目打包发布移动App——vue.config.js中配置相对路径publicPath为空字符串在public中添加HBuilderX的打包配置文件manifest.json
Vue 项目打包发布移动 App--npm run build打包 & vue.config.js文件中配置相对路径publicPath为空字符串 & 在 public中添加HBuil ...
vue样式引入图片_详解Vue.js中引入图片路径的几种方式
vue --version 3.6.3 记录总结一下的Vue中引入图片路径的几种书写方式 vue中静态资源的引入机制 Vue.js关于静态资源的官方文档静态资源可以通过两种方式进行处理: 在 Jav ...
js修改地址栏url_在gulp、create-react-app中css，js中的文件路径
我们的项目HTML文件单独放在一个服务器上,静态资源js.css.images放在我们的静态资源服务器上,这样部署后会出现一个问题,css文件中的图片相对路径,在html的服务器上就会变成 //htm ...
webpack打包js文件，图片路径错误，没有将图片打包的问题
初用 webpack 进行项目开发的同学会发现:在 js 或者 vue 中引用的图片都没有打包进 bundle 文件夹中.这时是需要require的方式进行图片路径的引用,这样引用的图片就可以成功打包 ...
js相对路径相关（比如：js中的路径依赖导入该js文件的路径）
问题描述: 前几天调用同事的js接口文件,在他自己的html测试页面ok,在我这边调用时出现问题. debug过程中,将该测试html移到其他位置都不行,放到原html测试页面同层次路径下是OK的. ...
JS中获取contextPath的方法
参考:https://hanzhdy.iteye.com/blog/2261832 https://blog.csdn.net/xb12369/article/details/46416845 在JS ...
vue main.js中引入js_手把手教你深入Vue3.0(Vue-cli4)项目打包性能优化实践
记录了自己的博客在禁用缓存的情况下,从八九秒加载时间到最终985ms的优化实践,开启缓存的情况下能达到138ms的访问速度本人的个人博客采用的是Vue-cli4.1.2 + typescript构建 ...
echarts怎么用在php,在Vue.JS中怎样使用echarts
这次给大家带来在Vue.JS中怎样使用echarts,在Vue.JS中使用echarts的注意事项有哪些,下面就是实战案例,一起来看一下. 上篇文章给大家介绍了在 webpack 中使用 EChar ...
认清js中var a=b=1和var a=1,b=1的区别
js中一次性定义多个变量的时候,可以用:var a=1,b=1这种中间用逗号隔开的方式,但有些时候为了省事,直接定义var a=b=1.那这两种写法方式最后效果是一样的吗?有没有什么区别呢?请大家看下 ...

img打 webpack_webpack 打包js中的img路径问题

img打 webpack_webpack 打包js中的img路径问题相关推荐

最新文章

热门文章