javascript - 如何在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

您只需将图片移至 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`">