在 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中文网其他相关文章！
