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

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

在 Vue.js 应用程序中，当图像存储在变量中并通过文件访问时，渲染动态图像可能具有挑战性路径。为了克服这个问题，开发人员在使用 v-bind:src 和计算值来检索图像文件名时通常会遇到问题。

原始方法：

<img v-bind:src="'../assets/' + pic + '.png'" v-bind:alt="pic">

问题：

当图像文件名存储在变量中时，此方法不会渲染动态图像。

解决方案：

为了解决这个问题，可以定义一个自定义方法 getImgUrl 来动态检索图像 URL 并将其绑定到 img 元素的 src 属性。

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

<!-- HTML -->
<img :src="getImgUrl(pic)" v-bind:alt="pic">

为什么原始方法失败:

原始方法失败，因为 Vue.js 无法动态解析文件路径字符串。 require.context 函数允许 Vue 访问应用程序内的静态资源，使 getImgUrl 方法成为更可靠的解决方案。

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