logo标签列表

Vue.js动态图片在使用webpack时无法正常工作。

javascripthtmlvue.jswebpackvuejs2
173
我有一个案例，在我的Vue.js和webpack的web应用程序中，我需要显示动态图片。我想要展示img标签，其中图片的文件名存储在一个变量中。这个变量是一个computed属性，它返回一个Vuex存储变量，该变量在beforeMount生命周期钩子函数中异步地被填充。
<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">

我的情况与这个fiddle类似，但是这里使用的是图片URL，而我用实际文件路径时无法工作。

正确的方法应该是什么？

6
已解决。这个也解决了问题： <v-img :src="require(@/assets/ + items.image)" height="200px"></v-img>。 - Mohamed Raza
23个回答
0

尝试了几种方法，但是用这种方式对我来说很有效。没有问题。

<div class="anyClass" :style="{ backgroundImage: `url('${airport.photo}')` }">
</div>

照片是名为"机场"的数组的属性。

0
methods: {
  getPic(index) {
    return '../assets/' + this.pics[index] + '.png';
  }
}

然后在你的 v-for 循环内执行以下操作：

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

Vue3 解决方案

如果你正在使用 Vue3 或者 Vite with Nuxt3，当尝试实现以上解决方案时，你可能会遇到问题 ReferenceError: require is not defined。

简而言之

除非你有充分的理由不使用，否则请使用 public 文件夹（manniL）

否则，可以使用以下方法解决，利用 import.meta.glob（感谢 danielroe）：

<template>
  <img :src="images[dynamic_image_name]" alt="Discover Nuxt 3" />
</template>
<script setup lang="ts">
import { filename } from 'pathe/utils';

const glob = import.meta.glob('~/assets/*.svg', { eager: true });
const images = Object.fromEntries(
  Object.entries(glob).map(([key, value]) => [filename(key), value.default])
);

const dynamic_image_name = 'zero-config';
</script>

进一步了解详情，请查看Nuxt Github上关于该问题的深入讨论链接1和这篇博客文章链接2。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接