我有一种情况，在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，但是在我的具有实际文件路径的情况下，它不起作用。
正确的方法是什么？
Answers:
我通过以下代码来工作
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：
<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/
@/assets/+ items.image）” height =“ 200px”> </ v-img>`这个也解决了问题
最好的选择是仅使用一种简单的方法为给定索引的图像构建正确的字符串：
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旁边）：
我也遇到了这个问题，似乎两个建议最多的答案都可以，但是有一个小问题，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;
}
}
您可以使用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
},
<img src="../assets/graph_selected.svg"/>
Webpack通过加载程序将静态路径解析为模块依赖项。但是对于动态路径，您需要使用require来解析路径。然后，您可以使用布尔变量和三元表达式在图像之间切换。
<img :src="this.graph ? require( `../assets/graph_selected.svg`)
: require( `../assets/graph_unselected.svg`) " alt="">
当然，可以通过一些事件处理程序来切换布尔值。
:src="require(../assets/category_avatar/baby_kids.jpeg)"
对我来说，最好，最简单的方法就是从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>
尝试像这样导入图像，因为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>
@/assets/+ items.image）” height =“ 200px”> </ v-img>`这也解决了问题