이미지가 Vue.js 2에 로드되지 않는 이유는 무엇입니까?

이미지가 Vue.js 2에 로드되지 않는 이유는 무엇입니까?

Vue.js 2의 상대 경로를 통해 이미지를 로드하려고 하는데 뭔가 잘못된 것 같습니다.나는 Vue에 관해 막 발을 적시고 있는데 어떤 조언이라도 해주면 고맙겠다.상기 이미지는 /src/assets/imgs 디렉토리에 있습니다.

다음은 해당 컴포넌트의 관련 코드 스니펫입니다.

<template>
  <section class="container sources">
        <h2>{{ heading }}</h2> 
        <div class="columns">
            <div class="column" v-for="source in sources">
                <figure :title="source">
                    <img :src="imgPath + source + '.png'" :alt="source + ' logo'">
                    <figcaption>{{ source }}</figcaption>        
                </figure>        
            </div>
        </div>
    </section>
</template>

<script>
export default {
   name: 'sources',
   data () {
      return {
          heading: 'News Sources',
          imgPath: 'src/assets/imgs/',
          sources: [
            'al-jazeera-english', 'associated-press', 'bbc-news', 'bbc-sport', 'business-insider', 'cnn', 
            'daily-mail', 'entertainment-weekly', 'espn', 'financial-times', 'fox-sports', 'hackernews', 
            'ign','independent', 'mtv-news', 'national-geographic', 'new-scientist', 'reuters', 'techcrunch', 'the-economist', 'the-guardian-uk', 'the-huffington-post', 'the-new-york-times', 
                'the-washington-post'
           ]
      }
   }
}
</script>

편집: 요청에 따라 프로젝트(단순) 파일 트리의 스크린샷을 추가합니다.해당 이미지는 물론 'imgs' 폴더에 있습니다.

웹 팩 템플릿을 사용하고 있다고 가정합니다.vue-cli는 스태틱에 대한 상대경로를 사용하는 것만으로 충분합니다.

<img :src="'./assets/imgs/' + source + '.png'"

---

또는 이미지를 에 저장합니다.static디렉토리와 절대 경로를 사용하여 참조합니다.

<img :src="'/static/imgs/' + source + '.png'"

이거면 될 것 같아

<img :src="image" >
data () {
  return {
    image: require('@/assets/images/pin.svg')
  }
},

제 경우 ../assets/{name of image}를 사용했습니다.

src/컴포넌트/Some Component.표시하다

<style>
    .black.square{
        background: url(../assets/logo.png);
    }
</style>

Vue.js의 JS를 통해 자산 폴더에 포함된 목록에 대한 링크를 작성하려면 먼저 이미지를 Import해야 합니다.

'@/assets/myImage.png'에서 img 가져오기

다음으로 Import한 이미지 파일을 변수 image:img,

마지막으로 img 태그:src="image"에 img를 src합니다.

언급URL : https://stackoverflow.com/questions/44959724/why-dont-my-images-load-in-vue-js-2