vuecli3에서imgsrc의 도입 문제 해결

최근에 회사에서 온라인 ps 프로젝트를 하려고 하는데 백그라운드가 다 쓰지 않았어요. 제가 로컬 사진으로 미리보기를 올릴 때 그림이 표시되지 않는 것을 발견했어요. 해결 방법은

// 
 <div class="workspace" >
   <img :src='img'>
 </div>
export default {
 data() {
 return {
  img:require('../../assets/fapiao.jpeg'),
  // require   img  ,   
  //[require('../../assets/fapiao1.jpeg'),
  //require('../../assets/fapiao2.jpeg'),
  //require('../../assets/fapiao3.jpeg').....]
  fileList: []
 };
 },
}

이전에 나는 절대적인 경로와 상대적인 경로를 사용했지만 실현할 방법이 없었다. 나중에 공식 문서를 찾은 것은 정적 asset 파일을 저장하지 않았기 때문이다. 정적은 현재public에 저장되어 있다.그러나 나는public에서img파일을 만들고 그림을 놓아서는 안 된다.그래서 세 가지 방법 중 리퀴어만 vuecli3를 사용하고,
여러분들이 좋은 해결책이 있으면 같이 공유할 수 있어요.
1. 템플릿에 그림 자원을 직접 도입한다(보통 @ 또는./도입한다)
2. 사진 자원을 static 폴더 아래에 놓기
3. 그림 자원은 assets 폴더 아래에 있습니다. 데이터는 require로 불러와야 합니다. 그렇지 않으면 문자열로 처리됩니다.
(저는 현재 assets에 넣고 있습니다. 로컬에 업로드된 가짜 데이터를 만들 때 미리 보기를 준비하거나 이후의 기본 그림이 바로 그것이기 때문입니다.)
두 번째, 그림을static 폴더 아래에 놓으면 됩니다. 이유는 다음과 같습니다.
여기에서 vuecli 발가락 구축 도구를 사용하면 디렉터리에 static 디렉터리가 생성됩니다. 이것은 정적 디렉터리입니다. 이 디렉터리에 img를 저장하는 것을 추천합니다. 그러면 웹 팩을 컴파일한 후에도 이 디렉터리에 있는 경로를 얻을 수 있습니다. 그러면 경로가 맞지 않아 그림이 불러오지 않는 문제를 해결할 수 있습니다!물론 프로젝트에서 사용하는 것은 일반적으로 절대 경로이다. 소수의 그림이라면 이런 방식은 매우 좋다
하지만 포인트: vuecli3는 static이 없잖아!!!
======= 보충

 <ul>
   <li v-for="(item,index) in src" :key="index" @click="jump">
   <img :src="item" alt>
   </li>
 </ul>

export default {
 data() {
 return {
  centerDialogVisible: false,
  form: {
  LoginName: "",
  PassWord: ""
  },
  rules: {
  LoginName: [
   { required: true, message: " ", trigger: "blur" }
  ],
  PassWord: [{ required: true, message: " ", trigger: "blur" }]
  },
  message: "",
  src: [
  require("../assets/imgs/001.jpg"),
  require("../assets/imgs/002.jpg"),
  require("../assets/imgs/003.jpg"),
  require("../assets/imgs/004.jpg"),
  require("../assets/imgs/005.jpg")
  ]
 };
 },

완벽한 동적 귀속, Gong 지장 계속 화이팅 하하하하~!!!
이 페이지에 이어서 루트-link가 페이지를 돌면 어떻게 설정을 추가합니까

 <ul>
   <li v-for="(item,index) in src" :key="index" @click="jump(item.address)" :plain="true">
   <img :src="item.img" alt>
   </li>
  
 </ul>

export default {
 data() {
 return {
  centerDialogVisible: false,
  src: [
  { img: require("../assets/imgs/001.jpg"), address: "taxplayerinfo" },
  { img: require("../assets/imgs/002.jpg"), address: "taxsheet" },
  { img: require("../assets/imgs/003.jpg"), address: "search" },
  { img: require("../assets/imgs/004.jpg"), address: "home" }
  ]
 };
 },
 methods: {
 jump(address) {
  this.$router.push({ name: address });
 }
 }
};

보충 지식: vue-cli3.0 그림을public에 놓고, vue가 비루트 디렉터리를 포장할 때 그림 도입 오류
해결 방법:
방법 1.nginx 설정을 수정합니다. 디렉터리 espace를 예로 들겠습니다.

upstream a.xx.com{
 server 127.0.0.1:8081;
}

server {
 listen 80;
 server_name a.xx.com;
 location /{
  proxy_pass http://a.xx.com;
 }
 location ^~/images/ {
  proxy_redirect off;
  proxy_set_header Host $host;
  proxy_set_header X-Real-IP $remote_addr;
  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  proxy_pass http://127.0.0.1:8001/images/;
 }
 location ^~/espace/ {
  proxy_redirect off;
  proxy_set_header Host $host;
  proxy_set_header X-Real-IP $remote_addr;
  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  proxy_pass http://127.0.0.1:8001/;
 }
}

방법파일 디렉터리를 수정하고 src/assets/images에 파일을 놓습니다
vue.config.js

let path = require('path')

function resolve(dir) {
 return path.join(__dirname, dir)
}
module.exports = {
 chainWebpack: config => {
  config.resolve.alias.set('@', resolve('src'));
 }
}

그림 도입

<img src="@/assets/images/icon_file.png">
.check_box a.active::after {
 background: url(~@/assets/images/check_box.png) no-repeat center;
}

이상의 vuecli3에서imgsrc의 도입 문제를 해결하는 것은 바로 편집자가 여러분에게 공유한 모든 내용입니다. 여러분께 참고가 되고 저희를 많이 사랑해 주시기 바랍니다.