У меня есть случай, когда в моем Vue.js с webpack веб-приложении мне нужно отображать динамические изображения. Я хочу показать img, где имя файла изображений хранится в переменной. Эта переменная является свойством computed, возвращающим переменную store 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, но здесь он работает с URL-адресом img, но в моем случае с фактическими путями файлов он делает не работает.
Каким должен быть правильный способ сделать это?
Я получил эту работу, выполнив код
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>
Но не знаю, почему мой предыдущий подход не сработал.
Вот сокращение, которое будет использовать веб-пакет, поэтому вам не нужно использовать 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)
}
И я обнаружил, что первые 2 абзаца здесь объясняют, почему это работает? Что ж.
Обратите внимание, что это хорошая идея, чтобы поместить изображения ваших домашних животных в подкаталог, вместо того, чтобы добавлять их к другим вашим изображениям. ./assets/pets/ так: ./assets/pets/
Лучше всего просто использовать простой метод для построения правильной строки для изображения по данному индексу:
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 рядом с изображением):
Есть еще один способ сделать это, добавив файлы изображений в общую папку вместо ресурсов и получая доступ к ним как к статическим изображениям.
<img :src="'/img/' + pic + '.png'" v-bind:alt="pic" >
Это где вы должны поместить ваши статические изображения:
Вот очень простой ответ. : D
<div class="col-lg-2" v-for="pic in pics">
<img v-bind:src="'../assets/${pic}.png'" v-bind:alt="pic">
</div>
Вы можете использовать блок 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
},
Ну, лучший и самый простой способ, который работал для меня, это то, о котором я выбирал данные из 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>
Вы можете попробовать функцию require. как это:
<img :src="require('@/xxx/${name}.png')" alt class="icon" />
Попробуйте импортировать изображение, как это, потому что 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>