javascript-Vue.js动态图片无法正常工作

我有一种情况,在我的Vue.jswebpack 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">

我的情况与此小提琴类似,但是在这里它适用于img URL,但是在我的具有实际文件路径的情况下,它不起作用。

正确的方法是什么?

Saurabh asked 2020-06-27T09:02:37Z
9个解决方案
54 votes

我通过以下代码来工作

  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>

但不确定为什么我的早期方法不起作用。

Saurabh answered 2020-06-27T09:02:55Z
39 votes

这是webpack会使用的简写,因此您不必使用./assets/pets/

HTML:

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

方法视图:

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

而且我发现这里的前两段解释了为什么这样做? 好。

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

Artur Grigio answered 2020-06-27T09:03:32Z
8 votes

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

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

然后在src中执行以下操作:

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

这是JSFiddle(显然图像未显示,因此我将图像src456置于图像旁边):

[HTTPS://JS fiddle.net/请2人在世上新人/]

craig_h answered 2020-06-27T09:04:06Z
7 votes

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

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

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

enter image description here

Rukshan Dangalla answered 2020-06-27T09:04:32Z
3 votes

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

<div class="col-lg-2" v-for="pic in pics">
   <img v-bind:src="`../assets/${pic}.png`" v-bind:alt="pic">
</div>
Antonio answered 2020-06-27T09:04:52Z
1 votes

您可以使用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
},
Gabriel Fernandez answered 2020-06-27T09:05:12Z
0 votes

对我来说,最好,最简单的方法就是从API提取数据。

methods: {
       getPic(index) {
    return this.data_response.user_Image_path + index;
  }
 }

getPic方法采用一个参数即文件名,它返回文件的绝对路径,可能来自服务器,文件名简单。

这是我使用此组件的示例:

<template>
    <div class="view-post">
        <div class="container">
     <div class="form-group">
             <label for=""></label>
             <input type="text" class="form-control" name="" id="" aria-describedby="helpId" placeholder="search here">
             <small id="helpId" class="form-text user-search text-muted">search for a user here</small>
           </div>
           <table class="table table-striped ">
               <thead>
                   <tr>
                       <th>name</th>
                       <th>email</th>
                       <th>age</th>
                       <th>photo</th>
                   </tr>
                   </thead>
                   <tbody>
                       <tr v-bind:key="user_data_get.id"  v-for="user_data_get in data_response.data">
                           <td scope="row">{{ user_data_get.username }}</td>
                           <td>{{ user_data_get.email }}</td>
                           <td>{{ user_data_get.userage }}</td>
                           <td><img :src="getPic(user_data_get.image)"  clas="img_resize" style="height:50px;width:50px;"/></td>
                       </tr>

                   </tbody>
           </table>
        </div>

    </div>
</template>

<script>
import axios from 'axios';
export default {
     name: 'view',
  components: {

  },
  props:["url"],
 data() {
     return {
         data_response:"",
         image_path:"",
     }
 },
 methods: {
       getPic(index) {
    return this.data_response.user_Image_path + index;
  }
 },
 created() {
     const res_data = axios({
    method: 'post',
    url: this.url.link+"/view",
   headers:{
     'Authorization': this.url.headers.Authorization,
     'content-type':this.url.headers.type,
   }
    })
    .then((response)=> {
        //handle success
      this.data_response = response.data;
      this.image_path = this.data_response.user_Image_path;
       console.log(this.data_response.data)
    })
    .catch(function (response) {
        //handle error
        console.log(response);
    });
 },
}
</script>


<style scoped>

</style>
user8453321 answered 2020-06-27T09:05:41Z
0 votes

您可以尝试require函数。 像这样:

<img :src="require(`@/xxx/${name}.png`)" alt class="icon" />
feng zhang answered 2020-06-27T09:06:02Z
-1 votes

尝试像这样导入图像,因为Webpack应该知道其依赖性

    <ul>
              <li v-for="social in socials" 
              v-bind:key="social.socialId"
              >

                <a :href="social.socialWeb" target="_blank">
                  <img class="img-fill" :id="social.socialId" :src="social.socialLink" :alt="social.socialName">
                </a>
              </li>

            </ul>

<script>
        import Image1 from '@/assets/images/social/twitter.svg'
        import Image2 from '@/assets/images/social/facebook.svg'
        import Image3 from '@/assets/images/social/rss.svg'
        export default {
          data(){
            return{
              socials:[{         
                   socialId:1,         
                   socialName: "twitter",
                   socialLink: Image1,
                   socialWeb: "http://twitter.com"
              },
      {
          socialId:2,
          socialName: "facebook",
           socialLink: Image2,
           socialWeb: "http://facebook.com"

      },
      {
          socialId:3,
          socialName: "rss",
           socialLink: Image3,
           socialWeb: "http://rss.com"
      }]

 </script>
perun10 answered 2020-06-27T09:06:22Z
translate from https://stackoverflow.com:/questions/40491506/vue-js-dynamic-images-not-working