Vue.js动态图像不起作用

Question

我有一个案例,在我Vue.js的webpack网络应用程序中,我需要显示动态图像.我想显示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">

我的情况类似于这个小提琴,但这里它适用于img URL,但在我的实际文件路径中,它不起作用.

什么应该是正确的方法呢？

Answer 1

我通过以下代码得到了这个

  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>

但不确定为什么我之前的方法不起作用.

Answer 2

这是webpack将使用的简写,因此您不必使用require.context.

HTML:

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

Vue方法:

getImgUrl(pic) {
    return require('../assets/'+pic)
}

我发现这里的前两段解释了为什么这有效？好.

请注意,将您的宠物照片放在子目录中是一个好主意,而不是将其与所有其他图像资源一起放入.像这样:./assets/pets/

Answer 3

最好的办法是使用一种简单的方法为给定索引处的图像构建正确的字符串:

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>

这是JSFiddle(显然图像没有显示,所以我把图像放在图像src旁边):

https://jsfiddle.net/q2rzssxr/

Answer 4

还有另一种方法，可以将图像文件添加到公用文件夹而不是资产中，然后将其作为静态图像访问。

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

这是您需要放置静态图像的地方：

Answer 5

这是非常简单的答案。：D

<div class="col-lg-2" v-for="pic in pics">
   <img :src="`../assets/${pic}.png`" :alt="pic">
</div>

Answer 6

您可以尝试该require功能。像这样：

<img :src="require(`@/xxx/${name}.png`)" alt class="icon" />

Answer 7

I also hit this problem and it seems that both most upvoted answers work but there is a tiny problem, webpack throws an error into browser console (Error: Cannot find module './undefined' at webpackContextResolve) which is not very nice.

So I've solved it a bit differently. The whole problem with variable inside require statement is that require statement is executed during bundling and variable inside that statement appears only during app execution in browser. So webpack sees required image as undefined either way, as during compilation that variable doesn't exist.

What I did is place random image into require statement and hiding that image in css, so nobody sees it.

// template
<img class="user-image-svg" :class="[this.hidden? 'hidden' : '']" :src="userAvatar" alt />

//js
data() {
  return {
    userAvatar: require('@/assets/avatar1.svg'),
    hidden: true
  }
}

//css
.hidden {display: none}

Image comes as part of information from database via Vuex and is mapped to component as a computed

computed: {
  user() {
    return this.$store.state.auth.user;
  }
}

So once this information is available I swap initial image to the real one

watch: {
  user(userData) {
    this.userAvatar = require(`@/assets/${userData.avatar}`);
    this.hidden = false;
  }
}

Answer 8

Vue.js 使用vue-loader，一个用于 WebPack 的加载器，它被设置为在编译时重写/转换路径，以便让您不必担心不同部署（本地、开发、一个托管平台或其他）的静态路径，通过允许您使用相对本地文件系统路径。它还增加了其他好处，例如资产缓存和版本控制（您可能可以通过检查src生成的实际URL 来看到这一点）。

因此，将通常由vue-loader/WebPack处理的 src设置为在运行时评估的动态表达式将绕过此机制，并且生成的动态 URL 在实际部署的上下文中将是无效的（除非它是完全限定的，这是一个例外） ）。

如果相反，您将require在动态表达式中使用函数调用，vue-loader/WebPack 将看到它并应用通常的魔法。

例如，这行不通：

<img alt="Logo" :src="logo" />

computed: {
    logo() {
        return this.colorMode === 'dark'
               ? './assets/logo-dark.png'
               : './assets/logo-white.png';
    }
}

虽然这行得通：

<img alt="Logo" :src="logo" />

computed: {
    logo() {
        return this.colorMode === 'dark'
               ? require('./assets/logo-dark.png')
               : require('./assets/logo-white.png');
    }
}

我自己才知道这件事。花了我一个小时但是...你活着，你学习，对吧？

Answer 9

<div
    v-for="(data, i) in statistics"
    :key="i"
    class="d-flex align-items-center"
  >
    <img :src="require('@/assets/images/'+ data.title + '.svg')" />
    <div class="ml-2 flex-column d-flex">
      <h4 class="text-left mb-0">{{ data.count }}</h4>
      <small class="text-muted text-left mt-0">{{ data.title }}</small>
    </div>
  </div>

Answer 10

您可以使用 try catch 块来帮助处理未找到的图像

getProductImage(id) {
          var images = require.context('@/assets/', false, /\.jpg$/)
          let productImage = ''
          try {
            productImage = images(`./product${id}.jpg`)
          } catch (error) {
            productImage = images(`./no_image.jpg`)
          }
          return productImage
},

Answer 11

<img src="../assets/graph_selected.svg"/>

静态路径由 Webpack 通过 loader 解析为模块依赖项。但是对于动态路径，您需要使用 require 来解析路径。然后，您可以使用布尔变量和三元表达式在图像之间切换。

<img :src="this.graph ? require( `../assets/graph_selected.svg`) 
: require( `../assets/graph_unselected.svg`) " alt="">

当然，还可以通过一些事件处理程序来切换布尔值。

Answer 12

我也面临这个问题。

尝试一下：

computed {
    getImage () {
        return require(`../assets/images/${imageName}.jpg`) // the module request
    }
}

这是一篇很好的文章，阐明了这一点： https: //blog.lichter.io/posts/dynamic-images-vue-nuxt/