如何在vue中使用动态本地图像？答案

【问题标题】：How to use dynamic local image in vue?如何在vue中使用动态本地图像？
【发布时间】：2021-01-15 20:28:12
【问题描述】：

我正在尝试根据所选选项（使用下面显示的模板）显示动态图像，但是当我部署应用程序时，我认为 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。

【问题讨论】：

Webpack 会更改它处理的图像资产的名称，但这就是您使用 require 的原因，以获取更改后的名称。捆绑包还包含该名称，因此请务必在生产环境中使用捆绑的文件
使用图片作为静态文件，而不是 assets 将被 webpack 处理
@AlexHunter 但这已经是正确的，为什么要改变它？
@AlexHunter 我的意思是你不应该让 webpack 处理你的图像，因为文件将被处理成适合传输的文件（取决于它的大小）。对于服务器端渲染vue（也许你不是，但没关系），资产文件夹中的文件将由节点处理，但静态文件夹中的文件不会被处理。将图像视为普通文件，例如 robot.txt 或 favicon.ico.more about it
因为它不起作用，我正在构建一个库（npm run build-lib），当我安装它时，控制台说找不到图像@Dan

标签： javascript vue.js webpack vuejs2

【解决方案1】：

您可以通过简单地将图像移动到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`">

【讨论】：

OP commented 他们将项目构建为库，因此静态资产不是一个可行的选择。
啊抱歉，没注意到。感谢您的评论。

【解决方案2】：

写入输出目录的图像由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                             ?
          })
  }
}

【讨论】：

@vineeth OP 没有使用哈希（可能不需要缓存），并且明确想要删除哈希，因为它阻止了库的使用.
是的。我刚刚阅读了上面的评论。谢谢。是的，删除哈希是解决这个问题的好方法

【解决方案3】：

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

例子：

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

【讨论】：

不建议删除webpack loader hash，因为容易造成缓存。当您替换图像时，它无法更快地更新。导致老图内容的展示。