vue 动态设置img的src地址无效,npm run build 后找不到文件的解决

在Vue中动态设置img的src地址无效的问题，通常是因为在引用图片的路径上出现了问题。当使用npm run build后，webpack会将所有的静态资源文件（如图片、CSS等）打包成静态文件，如果路径不正确，打包后引用的文件名就会发生变化，导致找不到文件的问题。下面是详细的攻略。

1. 确认文件路径

在Vue中，引用图片的路径通常是相对路径。如果出现路径错误，打包后Vue会在找不到对应的文件，而导致图片无法显示。

例如，在下面的代码中，images目录应该在src目录下：

<img src="../images/logo.png">

如果在打包后的JS文件中，路径变为了assets/imgs/logo.png，Vue就无法找到对应的文件，图片也就无法显示。

因此，在使用Vue的时候，需要确认引用文件的路径是否正确，特别是在使用相对路径时。

2. 使用require引用图片

如果在Vue中，使用require引用图片，可以避免路径错误的问题。require用于引用模块或文件，其中如果以'./' './.' 或 '../'开头，就可以表示相对路径。

例如，在下面的代码中，我们使用require引用图片，再把图片路径放在data中，就能够动态设置img标签的src属性:

<template>
  <div>
    <img :src="imgSrc" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgSrc: ""
    };
  },
  mounted() {
    this.imgSrc = require("../assets/images/logo.png");
  }
};
</script>

需要注意的是，使用require引用图片，需要在build/webpack.base.conf.js文件中配置loader:

{
  test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
  loader: 'url-loader',
  options: {
    limit: 8192,
    name: utils.assetsPath('img/[name].[hash:7].[ext]')
   }
},

将以上代码放到module.rules中，就可以在Vue中使用require动态设置img标签的src地址了。

示例

• 设置图片路径错误

<template>
  <div>
    <img :src="../images/logo.png" />
  </div>
</template>

<script>
export default {
  data() {
    return {};
  }
};
</script>

以上代码中，图片文件路径错误

• 使用require引用图片

<template>
  <div>
    <img :src="imgSrc" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgSrc: ""
    };
  },
  mounted() {
    this.imgSrc = require("../assets/images/logo.png");
  }
};
</script>

以上代码中，使用require引用图片，并动态设置img标签的src属性。