如何使用计算属性和 Webpack 在 Vue.js 中动态显示图像？

使用 Webpack 在 Vue.js 中动态显示图像

在使用 webpack 的 Vue.js 应用程序中，尝试动态显示图像时可能会遇到挑战显示文件名存储在计算属性中的图像。具体来说，如果这些属性依赖于异步填充的 Vuex 存储变量，您可能会发现图像路径未正确解析。

考虑以下 Vue 模板：

<div class="col-lg-2" v-for="pic in pics">
  <img v-bind:src="'../assets/' + pic + '.png'" v-bind:alt="pic">
</div>

虽然此方法有效当提供静态图像路径时完美无缺（例如，)，当从计算属性动态生成路径时，它无法显示图像。类似的问题已在此小提琴中报告并解决。

要解决此问题，您可以使用以下 JavaScript 代码：

getImgUrl(pet) {
  var images = require.context('../assets/', false, /\.png$/)
  return images('./' + pet + ".png")
}

此函数利用 webpack 的 require.context() 动态地根据提供的文件名从特定目录加载图像。

在 HTML 模板中，应更新 v-bind:src 属性以引用getImgUrl() 函数而不是直接生成路径：

<div class="col-lg-2" v-for="pic in pics">
  <img :src="getImgUrl(pic)" v-bind:alt="pic">
</div>

通过实现此解决方案，您可以使用 webpack 在 Vue.js 应用程序中动态显示图像，即使图像文件名存储在计算属性中。

以上是如何使用计算属性和 Webpack 在 Vue.js 中动态显示图像？的详细内容。更多信息请关注PHP中文网其他相关文章！