[javascript] Vue.js 동적 이미지가 작동하지 않음

Question 1

내 한 경우이 Vue.js와 webpack웹 응용 프로그램, 나는 동적 이미지를 표시해야합니다. img이미지 파일 이름이 변수에 저장되는 위치 를 표시하고 싶습니다 . 이 변수는에서 비동기 적으로 채워지는 저장소 변수를 computed반환 하는 속성입니다 .VuexbeforeMount

<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에서 작동하지만 실제 파일 경로에서는 작동하지 않습니다.

이를 수행하는 올바른 방법은 무엇입니까?

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

그러나 이전 접근 방식이 왜 효과가 없었는지 확실하지 않습니다.

Question 3

다음은 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/

Question 4

require기능을 사용해 볼 수 있습니다 . 이렇게 :

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

Question 5

자산 대신 공용 폴더에 이미지 파일을 추가하고 정적 이미지로 액세스하는 또 다른 방법이 있습니다.

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

여기에 정적 이미지를 넣어야합니다.

Question 6

가장 좋은 방법은 주어진 인덱스에서 이미지에 대한 올바른 문자열을 작성하는 간단한 방법을 사용하는 것입니다.

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/

Question 7

나는 또한이 문제에 부딪 혔고 대부분의 upvoted 답변이 작동하지만 작은 문제가있는 것 같습니다 .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;
  }
}

Question 8

여기 아주 간단한 대답이 있습니다. :디

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