vue中如何使用动态本地图片？

Question

我正在尝试根据选定的选项显示动态图像（使用下面显示的模板），但是当我部署应用程序时，我认为 Webpack 会更改图像文件名。如何防止这种重命名？

<select v-model="geturl">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
<div v-if="geturl">
    <img
        :src="require(`@/assets/images/${geturl}.jpg`)"
        style="height:250px; width:250px; object-fit:cover;">
</div>

如果我在开发模式下更改选项，我可以看到图像；但是当我部署应用程序时，图像文件名会转换为 1.zxc123.jpg。

Answer 1

写入输出目录的图像由 file-loader（通过 url-loader）处理。 Vue CLI 使用 filename template 配置 file-loader：

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

在您的 Vue project config 中，从文件名模板中删除 .[hash:8] 以禁用资产哈希：

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('images')
        .use('url-loader')
          .loader('url-loader')
          .tap(options => {
            // file-loader is the fallback loader
            options.fallback.options.name = 'img/[name].[ext]'
            return options                             ?
          })
  }
}

Answer 2

您可以通过简单地将图像移动到 public 文件夹并使用组件中的绝对路径导入图像来防止重命名。

然后你可以使用like..

<img :src="`${geturl}.jpg`">

或者，如果您想更好地控制 base_url，那么您可以执行以下操作..

在 public/index.html 中，您需要在链接前加上 <%= BASE_URL %> 前缀：

<link rel="icon" href="<%= BASE_URL %>favicon.ico">

在模板中，您需要首先将基本 URL 传递给您的组件：

data () {
  return {
    publicPath: process.env.BASE_URL
  }
}

那么：

<img :src="`${publicPath}${geturl}.jpg`">

Answer 3

图片应该放在public/images（需要创建图片）目录下，因为webpack不会编译。 vue2 放在 static/images 目录下。如果你不想这样做，那么你需要导入图片，因为这样你就可以在 webpack 编译后得到正确的图片路径。

示例：

...
  data: {imgs: [require('../assets/images/1.png'),require('../assets/images/1.png')]}
...