Vue.js 动态图像不工作

Question

我有一个案例，在我的 Vue.js with 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">

我的情况与此类似fiddle，但这里它适用于 img URL，但在我的实际文件路径下，它不起作用。

正确的做法是什么？

Answer 1

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

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 2

我通过以下代码实现了此功能

  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 3

这是 webpack 将使用的 shorthand，因此您不必使用 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)
}

而且我发现 here 中的前 2 段解释了 为什么这行得通？ 很好。

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

Answer 4

还有另一种方法，将图像文件添加到 public 文件夹而不是资产，然后将它们作为静态图像访问。

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

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

Answer 5

嗯，对我有用的最好和最简单的方法就是我从 API..

中获取数据的方法

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

getPic 方法采用一个参数，即文件名，它 returns 文件的绝对路径可能来自您的服务器，文件名很简单...

这是我使用的组件示例：

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

Answer 6

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

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

Answer 7

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

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

@ 符号指向 src 目录。

来源：Vue URL transfrom rules

Answer 8

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

我也遇到了这个问题，似乎两个最受欢迎的答案都有效，但有一个小问题，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}

图像通过 Vuex 作为信息的一部分来自数据库，并作为计算映射到组件

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

因此，一旦获得此信息，我就会将初始图像换成真实图像

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

Answer 10

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

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

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

Vue.js 使用 vue-loader，WebPack 的加载程序，在编译时设置为 rewrite/convert 路径，以便您不必担心静态路径会有所不同在部署（本地、开发、一个托管平台或另一个）之间，允许您使用 相对本地文件系统路径 。它还增加了其他好处，如资产缓存和版本控制（您可以通过检查实际生成的 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 13

尝试了这里的所有答案，但在 Vue2 上对我有用的是这样的。

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

Answer 14

因为我使用的是 Gridsome，所以这种方式对我有用。

**我还使用了 toLowerCase() 方法

      <img
        :src="
          require(`@/assets/images/flags/${tournamentData.address.country_name.toLowerCase()}.svg`)
        "
      />

Answer 15

我也遇到了这个问题

试一试：

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

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

Answer 16

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

截至今天，使用 VUE 3 + Typescript 和合成 AP我所做的是在 try catch 中包装 require 函数来处理崩溃。

computed: {
    getImage() {
        let imgSrc = "";
        try {
            imgSrc = require(`../assets/weather-widget-icons/ww-icon-${this.weatherForecast.main.toLowerCase()}.svg`);
        } catch (error) {
            console.error(`Image '../assets/weather-widget-icons/ww-icon-${this.weatherForecast.main.toLowerCase()}.svg' not found!`);
        }
        return imgSrc;
    }
}

并在图像标签中调用此函数：

<div class="weather-icon">
    <img :src="getImage" :alt="weatherForecast.main" />
</div>

Vue.js 动态图像不工作

Vue.js dynamic images not working

html

javascript

vue.js

vuejs2