为什么 Vue.js 和 Webpack 动态图像加载失败？

Vue.js 与 Webpack 中的动态图像加载问题

使用 Vue.js 和 Webpack 构建 Web 应用程序时，有时会显示动态图像提出挑战。一种常见的情况是图像文件名存储在变量中，并且需要附加到基本路径以生成完整的图像源。

开发人员遇到了一个问题，其中以下代码旨在动态显示图像基于计算属性，失败：

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

有趣的是，使用静态图像路径的类似方法可以作为预期：

<img src="../assets/dog.png" alt="dog">

难题在于两种方法之间的差异。使用静态路径直接指示 Webpack 将图像包含在构建中，确保其在运行时的可用性。然而，动态方法依赖于运行时生成的图像路径，而 Webpack 在构建过程中无法预测这一点。因此，该图像未包含在捆绑包中，从而导致文件丢失。

为了解决这个问题，开发人员转向了 require.context() 方法，该方法提供了一种动态加载模块或文件的方法在特定的背景下。通过使用以下代码：

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

并按如下方式更新 HTML：

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

开发人员达到了预期的效果。 require.context() 允许他们根据 pic 属性的值动态加载图像文件，并且 Webpack 将所需的图像包含在包中。

以上是为什么 Vue.js 和 Webpack 动态图像加载失败？的详细内容。更多信息请关注PHP中文网其他相关文章！