webpack打包的项目，修改src属性时报路径错误404

Question

项目描述：项目由webpack打包，已确认配置文件无误，因为图片均显示正常

output: {
    path        : __dirname + '/dist/',
    publicPath  : 'dev' === WEBPACK_ENV ? '/dist/' : '//s.com/dist/',
    filename    : 'js/[name].js'
},
resolve:{
    alias:{
      // node_modules: __dirname + '/node_modules',
      util:__dirname+'/src/util',
      page:__dirname+'/src/page',
      service:__dirname+'/src/service',
      image:__dirname+'/src/image',
    }
},

问题描述：在动态修改已有img元素的src属性值时，路径总是报错，如点击一个按钮，更换该按钮的背景图片，输出的工程就是找不到图片文件路径

<a href="" class="btn detail-play">
   <img src="../../image/my/detail_bofang_baise.png" alt="" class="play-img">Play
</a>

上面是点击前，图片显示正常的代码，下面是点击更换img图片的代码

$(document).on('click', '.detail-play', function (e) {
  e.preventDefault();
  $('.play-img')[0].src='/dist/res/play_zanting.png';
});

上面两张是点击前显示正常的截图，下面是点击更换src属性值后的情况

排除图片放错文件夹的情况，两张图片在一个文件夹里面。也排除图片不存在的情况，我把点击前的文件名代码换成点击后的文件名，可以加载出来。

但是src无论改成什么路径都不行，均是报这个错，请问这个src要怎么设置？

$('.play-img')[0].src='../../image/my/play_zanting.png';
$('.play-img')[0].src='play_zanting.png';
$('.play-img')[0].src='/dist/res/play_zanting.png';

Answer 1

自己解决了，虽然不优雅，应该有更争取的方法。
因为dist打包是编译过的，所以，如果不是编译过的图片，是不会出现的，因此我现在html中将需要切换的图片元素插入进去并display:none，这样就将切换后的图片显示出来了

Answer 2

路径应该没找对 打开浏览器看看有效图片的真实路径 然后再看看出错图片的路径就明白了
如果图片在一个路径下可以用正则直接替换图片的名字

$('.play-img')[0].src = $('.play-img')[0].src.replace(/\/\w+\.(png|jpg)$/, '/play_zanting.png')