Vue.js导入图片后在methods中调用无法显示问题求助

Hey there! I see the issue you're running into—let's break this down and get that SVG showing up as a background image.

The Main Problem: String Literal vs Variable Interpolation #

Your current code uses double quotes which treat this.image as plain text instead of evaluating it as a variable:

li.style.backgroundImage = "url('this.image')"

That's why the browser is trying to load http://127.0.0.1:8080/order/detail/29/this.image—it's taking the entire string literally, not recognizing this.image as your imported path.

Solution 1: Use Template Literals (Recommended) #

Replace the double quotes with backticks () and wrap your variable in ${}` to interpolate its actual value:

li.style.backgroundImage = `url(${this.image})`

This will correctly insert the image path you imported instead of the text "this.image".

Solution 2: String Concatenation #

If you prefer not to use template literals, you can concatenate the string manually to inject the variable:

li.style.backgroundImage = "url('" + this.image + "')"

Just make sure you close the quotes properly around the variable to avoid syntax errors.

Quick Checks to Rule Out Other Issues #

• Double-check your SVG path: Ensure @/assets/svg/xxx.svg points to the correct file (watch for typos, capitalization, or missing files). The @ alias in Vue usually maps to the src folder, which is set up by default in Vue CLI/Vite projects.
• Verify the imported path: Log this.image to the console to see what path is being generated—if it's empty or looks invalid, your import might be misconfigured.
• SVG compatibility: While less likely here, some SVGs with complex features might have issues as background images, but the path issue is the clear culprit in your case.

Give those fixes a try, and your background image should load correctly!

内容的提问来源于stack exchange，提问作者Xiaozhou Song