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

问题描述

问 题

项目描述：项目由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';

解决方案

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

这篇关于javascript - webpack打包的项目，修改src属性时报路径错误404的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！