如何在 Vue.js 和 Webpack 应用程序中动态渲染图像？

Vue.js 与 Webpack 中的动态图像渲染

在 Vue.js 和 webpack 应用程序中，您可能会遇到需要基于变量动态显示图像的情况。但是，如果您遇到动态图像无法正确显示的问题，那么纠正根本问题非常重要。

经常出现此问题的一个实例是当您将图像的文件名存储在计算属性中时检索在 beforeMount 上异步填充的 Vuex 存储变量。使用 v-bind:src 指令，您打算将动态文件名与静态资源路径连接起来以创建图像源。然而，这种方法可能并不总能产生预期的结果。

相反，更强大的解决方案是利用 webpack 的 require.context() 方法。此方法允许您根据提供的正则表达式访问特定目录中的文件。例如，您可以使用此方法从资产目录中获取所有 .png 文件。

要实现此解决方案，请在 Vue.js 组件中定义一个方法，该方法接受图像文件名作为参数。在此方法中，使用 require.context 检索图像路径并返回它。在 HTML 模板中，将 img 标签的 src 属性绑定到此方法。

<div class="col-lg-2" v-for="pic in pics">
  <img src="/static/imghwm/default1.png" data-src="getImgUrl(pic)" class="lazy" : v-bind:alt="pic">
</div>

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

将 require.context 方法与动态方法结合使用，可以有效解决Vue.js 和 webpack 应用程序中的动态图像渲染。

以上是如何在 Vue.js 和 Webpack 应用程序中动态渲染图像？的详细内容。更多信息请关注PHP中文网其他相关文章！