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

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

在使用 webpack 构建的 Vue.js Web 应用程序中，显示动态图像可能是一个常见的需求。然而，遇到此功能的问题可能会令人沮丧。让我们深入研究特定场景并探索解决方案。

问题

在提供的代码片段中，尝试动态显示存储在变量 如何使用 Webpack 在 Vue.js 中显示动态图像？ 中的图像。图像是从 Vuex 存储变量中检索的，该变量在 beforeMount 上异步填充。但是，动态图像显示不起作用，而静态定义的图像路径可以正常工作。

<img v-bind:src="'../assets/' 如何使用 Webpack 在 Vue.js 中显示动态图像？ '.png' " v-bind:alt="如何使用 Webpack 在 Vue.js 中显示动态图像？"><br>

解决方案

已发现解决此问题的一种方法是利用动态模块加载:

<br>getImgUrl(pet) {<pre class="brush:php;toolbar:false">var images = require.context('../assets/', false, /\.png$/)
return images('./' + pet + ".png")

}

在 HTML 中，动态图片路径可以是使用以下方式访问：

<br><img :src="getImgUrl(如何使用 Webpack 在 Vue.js 中显示动态图像？)" v-bind:alt="如何使用 Webpack 在 Vue.js 中显示动态图像？"><br>

此方法使用动态模块上下文从指定目录加载图像，允许动态图像显示。

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