vue에서 사진을 찾을 수 없다는 오류가 보고되면 어떻게 해야 하나요?

이미지를 찾을 수 없다는 vue 오류 보고에 대한 해결 방법: 1. 구성 파일을 수정하고 절대 경로를 상대 경로로 변경합니다. 2. 이미지를 모듈로 로드하고 이미지를 정적 디렉터리에 넣습니다. 응답에 imageUrls를 추가하세요. vue 파일에서 참조를 구문 분석하세요.

이 튜토리얼의 운영 환경: windows7 시스템, vue3, Dell G3 컴퓨터.

vue에서 오류가 보고되고 사진을 찾을 수 없으면 어떻게 해야 하나요?

vue에서 이미지가 로드되지 않는 문제와 해결책

vue를 사용하여 프로젝트를 개발할 때 자주 직면하는 문제는 이미지를 로드할 수 없다는 것입니다. 다음은 이미지를 로드할 수 없는 여러 상황에 대해 요약한 상황과 해결 방법입니다.

1. 프로젝트 패키징 완료 후 공백 전체 열기

1. 경로 문제

원인

vue+webpack 프로젝트에서 프로젝트 패키징 후 CSS 및 js의 참조 경로는 절대 경로입니다. 프로젝트 배포 후 추가됨 static을 루트 디렉터리로 사용하면 파일 참조 경로에 오류가 발생합니다.

해결 방법

구성 파일을 수정하여 절대 경로를 상대 경로로 변경하세요.

구체적인 작업은 다음과 같습니다.

1.vue-cli 버전 3.0

config에서 index.js의 bulid 모듈이 내보낸 경로를 구성합니다. index.html의 내용은 스크립트 태그를 통해 소개되고 경로가 잘못되었기 때문에 열면 분명히 비어 있을 것입니다. 먼저 기본 경로를 살펴보겠습니다.

module.exports = {
 build: {
 env: require('./prod.env'),
 index: path.resolve(__dirname, '../dist/index.html'),
 assetsRoot: path.resolve(__dirname, '../dist'),
 assetsSubDirectory: 'static',
 assetsPublicPath: '/',
 productionSourceMap: true,

assetsPublicPath 기본값은 루트 디렉터리인 '/'입니다. index.html과 static은 같은 디렉토리에 있습니다. 따라서 './'로 변경합니다.

2.vue-cli 버전 3.0

이후 vue.config.js 파일

module.exports = {
  // baseUrl:'./', // vue-cli3.3以下版本使用
  publicPath:'./' // vue-cli3.3+新版本使用

2을 구성한 후 vue-router의 히스토리 모드를 패키징한 후 인터페이스를 설정합니다. is 공백

src router/index.js 라우팅 구성의 기본 모드는 해시입니다. 기록 모드로 변경하면 열 때 공백이 됩니다. 그러니 해시로 변경하거나 모드 구성을 직접 삭제하여 기본값으로 설정하세요.

기록 모드를 사용해야 하는 경우 모든 상황을 포괄하는 후보 리소스를 서버 측에 추가해야 합니다. URL이 정적 리소스와 일치할 수 없는 경우 앱이 의존하는 페이지인 index.html을 반환해야 합니다. 에.

// mode: 'history' 
// 默认hash

2. 자산 디렉토리의 이미지를 로드할 수 없습니다.

vue-cli

• assets의 자산과 정적 파일의 차이점: 프로젝트 중에 webpack에 의해 차단됩니다. 컴파일 프로세스 처리는 모듈 종속성으로 해결되며 < img src='./logo.png'> .png'는 webpack이 모듈 종속성을 해결하는 상대 리소스 경로입니다. assets：在项目编译的过程中会被webpack处理解析为模块依赖，只支持相对路径的形式，如< img src=’./logo.png‘>和background:url(./logo.png),‘./logo.png‘是相对资源路径，将有webpack解析为模块依赖。
• static
static: 이 디렉터리의 파일은 webpack에서 처리되지 않습니다. 단순히 타사 파일이 저장된 위치가 webpack에서 구문 분석되지 않는다는 의미입니다. 최종 패키징 디렉터리에 직접 복사됩니다(기본값은 dist/static). 이러한 파일은 config.js 파일의 build.assetsPublic 및 build.assertsSubDirectory 링크를 통해 결정되는 절대 경로를 사용하여 참조되어야 합니다. static/에 있는 모든 파일은 절대 경로(/static[filename])로 참조되어야 합니다.

웹팩의 특성상 일반적으로 정적 파일은 변경되지 않습니다. 세 번째 파일인 Assert는 변경될 수 있는 파일입니다

이유

웹팩에서는 사진이 동적으로 로드되기 때문에 모듈로 사용됩니다. , URL 로더는 이미지 주소를 구문 분석할 수 없으며 npm run dev 또는 npm run build 이후 경로가 처리되지 않습니다. [webpack에 의해 구문 분석된 경로는 /static/img/[filename] 으로 구문 분석됩니다. png의 전체 주소는 localhost:8080/static/img/[filename].png】

Solution

1입니다. 이미지를 모듈로 로드하세요

예를 들어, Images:[{src:require('. / 1.png')},{src:require('./2.png')}], 웹팩이 이를 구문 분석할 수 있도록 합니다.

2. 이미지를 정적 디렉터리

에 배치하지만 이미지와 같은 절대 경로로 작성해야 합니다: [{src:”/static/1.png”},{src:”/static/2. png”}] 이렇게 하면 이미지도 표시됩니다. 물론 webpack.base.config.js에 정의하여 경로 작성 길이를 단축할 수도 있습니다. local 이미지로드를 단순화하십시오 , 참조 내용을 구문 분석하세요

{
  'imageUrls': [
    {
      'image1': '/static/image/image1.png'
    },
    {
      'image2': '/static/image/image2.png'
    }
  ]
}

추천 학습: "vue.js 비디오 튜토리얼

"

위 내용은 vue에서 사진을 찾을 수 없다는 오류가 보고되면 어떻게 해야 하나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!