Vue 단일 파일 구성 요소에서 이미지를 가져오고 사용하는 방법

Vue 단일 파일 구성 요소에서 이미지를 가져오고 사용하는 방법

간단하다고 생각합니다만, Vue 싱글 파일 컴포넌트의 이미지 Import와 사용 방법에 문제가 있습니다.누가 나 좀 도와줄래?코드 스니펫은 다음과 같습니다.

<template lang="html">
    <img src="zapierLogo" />
</template>
    
<script>
    import zapierLogo from 'images/zapier_logo.svg'
    
    export default {
    }
</script>
    
<style lang="css">
</style>

사용해보았습니다.:src,src="{{ zapierLogo }}"등. 하지만 아무것도 작동하지 않는 것 같아.나도 예시를 찾을 수 없었다.도움이 필요하신가요?

다음과 같이 심플합니다.

<template>
    <div id="app">
        <img src="./assets/logo.png">
    </div>
</template>
    
<script>
    export default {
    }
</script>
    
<style lang="css">
</style> 

vue cli에서 생성한 프로젝트에서 가져옵니다.

이미지를 모듈로 사용하는 경우 데이터를 Vuejs 컴포넌트에 바인드하는 것을 잊지 마십시오.

<template>
    <div id="app">
        <img :src="image"/>
    </div>
</template>
    
<script>
    import image from "./assets/logo.png"
    
    export default {
        data: function () {
            return {
                image: image
            }
        }
    }
</script>
    
<style lang="css">
</style>

그리고 더 짧은 버전:

<template>
    <div id="app">
        <img :src="require('./assets/logo.png')"/>
    </div>
</template>
    
<script>
    export default {
    }
</script>
    
<style lang="css">
</style> 

자산에서 사진을 가져올 때 웹 팩을 사용할 것을 강력히 권장합니다.일반적으로 최적화 및 패칭 목적으로 사용합니다.

웹 팩으로 로드하고 싶은 경우 간단히 사용할 수 있습니다.:src='require('path/to/file')'꼭 사용해 주세요.:그렇지 않으면 요구문이 Javascript로 실행되지 않습니다.

타이프스크립트에서도 거의 같은 조작을 실행할 수 있습니다.:src="require('@/assets/image.png')"

다음 사항이 일반적으로 잘못된 관행으로 간주되는 이유는 무엇입니까?

<template>
  <div id="app">
    <img src="./assets/logo.png">
  </div>
</template>

<script>
export default {
}
</script>

<style lang="scss">
</style> 

Vue CLI를 사용하여 빌드할 때 웹 팩은 자산 파일이 상대 Import에 이은 구조를 유지하도록 보장할 수 없습니다.이는 자산 폴더 내에 표시되는 항목을 최적화하고 청크하려는 웹 팩 때문입니다.상대적인 Import를 사용하는 경우는, Relative Import를 사용해 주세요.static폴더 및 사용:<img src="./static/logo.png">

최근에 이 문제를 발견했고, 저는 Typescript를 사용하고 있습니다.나처럼 Typescript를 사용하는 경우 다음과 같이 자산을 Import해야 합니다.

<img src="@/assets/images/logo.png" alt="">

루트 숏컷을 다음과 같이 사용할 수도 있습니다.

  <template>
   <div class="container">
    <h1>Recipes</h1>
      <img src="@/assets/burger.jpg" />
   </div>
  </template>

Nuxt이지만 Vue CLI와 동일합니다.

JavaScript와 TypeScript에서 모두 사용할 수 있습니다.

<img src="@/assets/images/logo.png" alt=""> 

또는

 <img src="./assets/images/logo.png" alt="">

에서 문제가 발생하였습니다.quasar모바일 프레임워크 기반입니다.vue, tidle 구문~assets/cover.jpg일반 컴포넌트에서는 동작하지만 다이내믹하게 정의된 컴포넌트에서는 동작하지 않습니다.

let c=Vue.component('compName',{...})

마지막으로 이 작업:

    computed: {
      coverUri() {
        return require('../assets/cover.jpg');
      }
    }

<q-img class="coverImg" :src="coverUri" :height="uiBook.coverHeight" spinner-color="white"/>

https://httpsar.dev/httpsar-cli/handling-https의 설명에 따르면

In *.vue components, all your templates and CSS are parsed by vue-html-loader and css-loader to look for asset URLs. For example, in <img src="./logo.png"> and background: url(./logo.png), "./logo.png" is a relative asset path and will be resolved by Webpack as a module dependency.

..다단계 Vueelectro-app에서 여러 번 사용한 플레이스홀더를 Import하려고 했던 경우와 같이 다른 모든 것이 실패했을 때, 이번에는 서브 서브컴포넌트 내에서 권장되는 솔루션이 정상적으로 동작하지 않았습니다.

<template>
    <div id="app">
        <img :src="image"/>
    </div>
</template>

<script>        
    export default {
        data() { return {image: null, ...} },
        methods: {
          solveImage(){
            const path = require('path')
            return path.join(process.cwd(), '/src/assets/img/me.jpg')
          },
          ...
         },
         mounted: {
           this.image = this.solveImage()
           ...
         }
    }
</script>

..해야 합니다.

created-flash-hook에서 더 잘 동작하는지 또는 글로벌하게 경로를 필요로 하고 콜만 하고 싶은지 여부

this.image = path.join(...)

후크 중 하나에 꽂혀 있습니다. 스스로 테스트해 보세요.

자산 이미지를 표시하는 것도 같은 문제에 직면해 있습니다.드디어 이 두 가지 방법이 나한테는 잘 통하네

<img src="@/assets/img/bg1.png" />

그리고.

<img :src="require('@/assets/img/bg1.png')" />

Vue 3의 경우,

<template>
  <div id="app">
    <img :src="zapierLogo" />
  </div>
</template>

<script>
import zapierLogo from 'images/zapier_logo.svg'


export default {
    ...
    data: function () {
        return {
            zapierLogo
        }
    }
}
</script>

다.src="@/assets/burger.jpg" ★★★★★★★★★★★★★★★★★」src="../assets/burger.jpg"효과가 없는 것 같았어

언급URL : https://stackoverflow.com/questions/45116796/how-to-import-and-use-image-in-a-vue-single-file-component