Js 动态图像不工作

小开

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

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/

小开

最佳答案

我是按照代码操作的

  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/

小开

还有另一种方法可以将图像文件添加到公用文件夹中，而不是将资产添加到公用文件夹中，并以静态图像的形式访问这些文件。

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

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

小开

对我来说最好和最简单的方法就是我从一个 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>

小开

答案很简单

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

小开

你可以试试 require函数。像这样:

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

@符号指向 src目录。

来源: Vue URL 转换规则

小开

您可以使用 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 在浏览器控制台中抛出了一个错误(错误: 无法找到模块’。/未定义’) ，这不是很好。

所以我用不同的方法解决了这个问题。内部变量的整个问题是，在捆绑过程中需要语句被执行，而语句中的变量仅在浏览器中的应用程序执行过程中出现。所以 webpack 认为所需的映像是未定义的，就像在编译过程中变量不存在一样。

我所做的就是将随机图像放入到 need 语句中并将该图像隐藏在 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;
}
}

小开

我也遇到了同样的问题。通过将’. ./asset/’更改为’./asset/’，这对我很有效。

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

小开

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

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

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

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

小开

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');
}
}

我也是刚知道的，花了我一个小时，但是... 活到老，学到老，对吧？

小开

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

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

小开

在我使用 Gridsome 的时候，这种方法对我很有效。

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

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

小开

我也遇到了这个问题。

试试看:

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

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

小开

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

小开

从今天开始，使用 VUE 3 + 打字和作文 API，我所做的就是包装需求函数中的 try catch 来处理崩溃。

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>

小开

图像需要转录。对我有效的方法是将图像放入公用文件夹，即 public/asset/img

Dynamic Image Tag:
<div v-for="datum in data">
<img
class="package_image"
style="max-width:200px;"
alt="Vue logo"
:src="`./assets/img/${datum.image}`"
>
<div>