VueJS中如何获取图片？Admin.vue组件图片加载问题求助

Hey there! Let's break down why your image isn't loading even though you're fetching data successfully. The main culprit here is how you're handling the Axios promise chain—let's fix that first, then cover some extra checks to make sure everything works smoothly.

Core Problem: Broken Promise Chain #

In your current code, the second .then() doesn't receive the response data you expect. Here's why:

• The first .then() only assigns this.lists = response.data but doesn't return anything. By default, a .then() returns undefined if you don't explicitly return a value.
• So when the second .then() runs, response is actually undefined, which means response.data.image throws an error (you might not see it if error handling isn't catching it, but it's happening!).

Fixed Code Option 1: Combine the Logic in One .then() #

This is the simplest approach—handle both data assignment and image path setup in a single promise handler:

export default{
  data(){
    return{
      lists:{},
      imageuser:"",
      errors: {} // Don't forget to initialize errors to avoid undefined issues!
    }
  },
  mounted(){
    axios.post('admin/getDataAdmin', this.$data)
      .then((response) => {
        this.lists = response.data;
        // Now we have direct access to response.data.image
        this.imageuser = `source/admin/assets/img/${response.data.image}`;
        console.log('Generated image path:', this.imageuser); // Debug to check the final URL
      })
      .catch((error) => {
        this.errors = error.response?.data?.errors || error.message;
        console.error('Fetch error:', error); // Log errors for debugging
      });
  },
}

Fixed Code Option 2: Return Data for the Next .then() #

If you prefer to keep separate handlers, make sure the first .then() returns the data you need to pass along:

mounted(){
  axios.post('admin/getDataAdmin', this.$data)
    .then((response) => {
      this.lists = response.data;
      return response.data; // Return the data to pass it to the next .then()
    })
    .then((data) => { // Now we receive the returned data here, not a full response object
      this.imageuser = `source/admin/assets/img/${data.image}`;
    })
    .catch((error) => {
      this.errors = error.response?.data?.errors || error.message;
    });
},

Additional Troubleshooting Checks #

Even after fixing the promise chain, double-check these things to ensure the image loads:

• Verify the image path: Open your browser's DevTools > Network tab, look for the image request. If it returns a 404, your path is wrong. For Vue CLI/Vite projects:
  • If your images are in the public folder, the path should start with / (e.g., /admin/assets/img/${data.image}) instead of source/.
  • If they're in src/assets, you might need to use require() for dynamic paths, but storing user-uploaded images in the public folder is usually the right approach.
• Check the database value: Make sure the image field in your DB has a valid filename (including extensions like .jpg or .png) and isn't empty.
• Debug the final path: Add console.log(this.imageuser) after setting it to see exactly what URL is being used—this will help spot typos or missing parts.

Once you make these changes, your image should load correctly if the path and filename are valid!

内容的提问来源于stack exchange，提问作者Quan Nguyen