Javascript Vue.js动态图像不工作

在我的

Vue.js

和

webpack

web应用程序中，我需要显示动态图像。我想显示

img

，其中图像的文件名存储在变量中。该变量是一个

computed

属性，返回一个

Vuex

store变量，该变量在

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一起工作，但在我的实际文件路径中，它不起作用

---

正确的方法应该是什么？

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

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>

这是JSFIDLE（显然图像不会显示，所以我将图像

src

放在图像旁边）：

---

我是通过以下代码实现的

  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>

---

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

这里有一个webpack将使用的速记，这样您就不必使用

require.context

HTML:

我发现中的前两段解释了为什么这样做？很好

---

请注意，最好将您的宠物图片放在一个子目录中，而不是将其与所有其他图像资源一起放入。类似这样：

/assets/pets/

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

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

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

---

对我来说，最好、最简单的方法就是从API获取数据

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

getPic方法接受一个参数，即文件名，它返回文件的绝对路径，可能来自您的服务器，文件名为simple

下面是我使用的组件示例：

<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>

在此处搜索用户
名称
电子邮件
年龄
照片
{{user\u data\u get.username}
{{user\u data\u get.email}
{{user\u data\u get.userage}
从“axios”导入axios；
导出默认值{
名称：“视图”，
组成部分：{
},
道具：[“url”]，
数据（）{
返回{
数据_响应：“”，
图像路径：“”，
}
},
方法：{
getPic（索引）{
返回this.data\u response.user\u Image\u path+索引；
}
},
创建（）{
const res_data=axios({
方法：“post”，
url:this.url.link+“/view”，
标题：{
“授权”：this.url.headers.Authorization，
“内容类型”：this.url.headers.type，
}
})
。然后（（响应）=>{
//成功
this.data_response=response.data；
this.image\u path=this.data\u response.user\u image\u path；
console.log（this.data\u response.data）
})
.catch（函数（响应）{
//处理错误
控制台日志（响应）；
});
},
}

这里有一个非常简单的答案：D

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

---

您可以尝试

require

功能。像这样：

@

符号指向

src

目录

---

来源：

您可以使用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
},

---

我也遇到了这个问题，似乎两个最上浮的答案都有效，但有一个小问题，webpack向浏览器控制台抛出了一个错误（错误：在webpackContextResolve上找不到模块“./undefined”），这不是很好

所以我用不同的方法解决了这个问题。require语句中的变量的整个问题是require语句在绑定期间执行，而该语句中的变量仅在浏览器中的应用程序执行期间出现。所以webpack认为无论哪种方式所需的图像都是未定义的，因为在编译过程中该变量不存在

我所做的是将随机图像放入require语句中，并将该图像隐藏在css中，这样就没有人看到它了

// 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}

因此，一旦这些信息可用，我就将初始图像切换到真实图像

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

---

我遇到了同样的问题。 这通过将“../assets/”更改为“../assets/”对我有效

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

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

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

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

Vue.js使用Web包的加载程序，该加载程序设置为在编译时重写/转换路径，以便让您不必担心部署（本地、开发、一个托管平台或另一个）之间会存在差异的静态路径，通过允许您使用相对的本地文件系统路径。它还增加了其他好处，如资产缓存和版本控制（您可能可以通过检查生成的实际

src

URL看到这一点）

因此，将通常由

vue loader

/WebPack处理的src设置为动态表达式，并在运行时进行计算，将绕过此机制，生成的动态URL在实际部署的上下文中无效（除非完全限定，这是个例外）

如果改为在动态表达式中使用

require

函数调用，

vue loader

/WebPack将看到它并应用通常的魔法

例如，这是行不通的：

<

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

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

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

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

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