vue javascript 내 정적 자산 참조 방법

vue javascript 내 정적 자산 참조 방법

뷰 자바스크립트 내의 이미지와 같은 정적 자산을 참조할 수 있는 올바른 URL을 찾고 있습니다.

예를 들어, 사용자 지정 아이콘 이미지를 사용하여 리플릿 마커를 만들고 있는데 여러 URL을 시도해 보았지만 모두 반환됩니다.404 (Not Found):

메인.뷰:

var icon = L.icon({
    iconUrl: './assets/img.png',
    iconSize:     [25, 25],
    iconAnchor:   [12, 12]
});

자산 폴더와 정적 폴더에 이미지를 넣으려고 했지만 운이 없었습니다.어떻게든 이미지를 로드하려면 vue에 말해야 합니까?

템플릿에서 이미지를 참조하고 싶은 모든 사용자는 '@'을 사용하여 이미지를 직접 참조할 수 있습니다.

예:

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

Vue 정규 설정에서,/assets제공되지 않습니다.

이미지는src="data:image/png;base64,iVBORw0K...YII="대신에 문자열을 사용합니다.

자바스크립트 내에서 사용하기:require()

JS 코드에서 이미지를 가져오려면 을 사용합니다.경로는 상대적이어야 합니다(아래 참조).

당신의 코드는 다음과 같습니다.

var icon = L.icon({
    iconUrl: require('./assets/img.png'),   // was iconUrl: './assets/img.png',
//  iconUrl: require('@/assets/img.png'), // use @ as alternative, depending on the path
    // ...
});

상대경로사용

예를 들어 다음과 같은 폴더 구조를 가지고 있다고 가정합니다.

- src
  +- assets
     - myImage.png
  +- components
     - MyComponent.vue

이미지를 참조하려면MyComponent.vue, 길이라야 합니다.../assets/myImage.png

여기에 데모 코드와 상자가 있습니다.

더 나은 해결책은

@acdcjunior의 답변에 몇 가지 모범 사례와 안전성을 추가하여 사용하기@대신에./

자바스크립트에서

require("@/assets/images/user-img-placeholder.png")

JSX 템플릿에서

<img src="@/assets/images/user-img-placeholder.png"/>

사용.@에 대한 지적합니다.src디렉토리 입니다.

사용.~는 프로젝트 루트를 가리키며, 이를 통해 더 쉽게 액세스할 수 있습니다.node_modules기타 루트 수준 리소스

웹팩이 올바른 자산 경로를 반환하려면 require('./relative/path/to/file.jpg')를 사용해야 합니다. 이는 파일로더에서 처리되어 확인된 URL을 반환합니다.

computed: {
  iconUrl () {
    return require('./assets/img.png')
    // The path could be '../assets/img.png', etc., which depends on where your vue file is
  }
}

VueJS 템플릿 - 정적 자산 처리 참조

스크립트 태그를 연 직후에 추가하기만 하면 됩니다.import someImage from '../assets/someImage.png'아이콘 URL에 사용합니다.iconUrl: someImage

마침내 나에게 효과가 있었고, 이미지는 지지자로 전달되었습니다.

<img :src="require(`../../assets/${image}.svg`)">

어떤 시스템을 사용하고 계십니까?웹팩?Vue-loader?

여기서 브레인스토밍만 하고...

.png는 자바스크립트 파일이 아니기 때문에 파일로더 또는 url로더를 사용하여 이를 처리하도록 웹팩을 구성해야 합니다.vue-cli로 스캐폴드된 프로젝트에서도 이를 구성했습니다.

한 번 보시면 됩니다.webpack.conf.js이렇게 잘 구성되어 있는지 확인하기 위해서.

...
    {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
...

/assets는 번들링 중에 웹팩에 의해 처리되는 파일을 위한 것입니다. 이를 위해서는 자바스크립트 코드 어딘가에서 참조되어야 합니다.

./static이 로 됩니다./dist후에 있는 그대로

다음과 같이 변경할 것을 권장합니다.

iconUrl: './assets/img.png'

로.

iconUrl: './dist/img.png'

공식 문서는 여기에서 읽을 수 있습니다. https://vue-loader.vuejs.org/en/configurations/asset-url.html

도움이 되기를 바랍니다!

다음과 같이 require 구문을 사용하면 효과가 있습니다.

$('.eventSlick').slick({
    dots: true,
    slidesToShow: 3,
    slidesToScroll: 1,
    autoplay: false,
    autoplaySpeed: 2000,
    arrows: true,
    draggable: false,
    prevArrow: '<button type="button" data-role="none" class="slick-prev"><img src="' + require("@/assets/img/icon/Arrow_Left.svg")+'"></button>',

환경에 따라 자산 경로를 정의할 수 있습니다.

const dev = process.env.NODE_ENV != 'production';
const url = 'https://your-site.com';
const assets = dev ? '' : url;

<template>
    <img :src="`${assets}/logo.png`"/>
    <p>path: {{assets}}</p>
</template>
<script>
    export default {
        data: () => ({
            assets
        })
    }
</script>

이상적으로 이는 utilsjs 파일 안에 있거나 확장 앱이 속성을 정의하는 방식으로 다음과 같습니다.

const app = createApp(component);
app.config.globalProperties.$assets = assets;
app.mount(element);

다음과 같이 제공됩니다.

<template>
    <img :src="`${$assets}/logo.png`"/>
    <p>path: {{$assets}}</p>
</template>
<script>
    export default {
        mounted() {
            console.log(this.$assets);
        }
    }
</script>

에서(:src/assets에 배치하고 고 HTML다를 참조할 수 .<img src="../src/assets/img/logo.png">(배치 시에도 변경 사항 없이 자동으로 작동함).

Vue와 함께 타이프스크립트를 사용하고 있지만 이렇게 진행했습니다.

<template><div><img :src="MyImage" /></div></template>
<script lang="ts">
    import { Vue } from 'vue-property-decorator';
    export default class MyPage extends Vue {
            MyImage = "../assets/images/myImage.png";
        }
</script>

생성, 마운트 또는 필요한 곳에 로드

async created() {
   try {
      this.icon = (await import('@assets/images/img.png')).default;
   } catch (e) {
      // explicitly ignored
   }

그리고 나서.

<img :src=icon />

인사이드 코드는 이미지를 직접 사용할 수 있습니다.

const src = require("../../assets/images/xyz.png");

아니면

이미지를 동적으로 로드하려면 이것이 필요합니다.

const image = new window.Image();
image.src = require("../../assets/images/xyz.png");
image.onload = () => {
// do something if needed
 };

더 JS의, 에 해야 import번들러(또는 웹팩 방문)에서 픽업할 이미지입니다.개발 모드와 프로덕션 모드에서 모두 실행할 때 다음 솔루션이 작동합니다.

import iconUrl from '@/assets/img.png';

const icon = L.icon({
    iconUrl:      iconUrl,
    iconSize:     [25, 25],
    iconAnchor:   [12, 12]
});

언급URL : https://stackoverflow.com/questions/47313165/how-to-reference-static-assets-within-vue-javascript