vue中img src 动态加载本地json的图片路径写法

Vue中的img标签动态加载本地JSON图片路径的方法

摘要：

在Vue开发中，我们常常需要根据后端返回的数据动态地展示不同的图片。本文将介绍如何在Vue中通过动态加载本地JSON文件来设置img标签的src属性，确保图片能够正确显示。此方法具有一定的参考价值，对于需要进行动态图片加载的朋友来说，非常值得一看。

一、背景知识

在进行Vue开发时，我们经常需要将图片路径写在静态文件夹中，并通过某种方式动态地将其赋值给img标签的src属性。但直接这样做可能会导致图片无法显示，控制台会报出404错误。我们需要采取特定的方式来处理这个问题。

二、具体实现方法

假设我们有一个名为`major_info.json`的本地JSON文件，其中包含了一些图片的路径信息。我们希望根据这些数据动态地设置img标签的src属性。

步骤一： 在Vue项目中，确保所有的静态资源（包括JSON文件和图片）都放在static文件夹下。这样做的好处是，所有的静态资源都会被Webpack直接复制到输出目录中，不会因为路径问题而导致资源加载失败。

步骤二： 在Vue组件中，使用v-bind指令来动态设置img标签的src属性。例如：

```html

```

在这里，`getThumb`是一个方法，它根据传入的参数返回对应的图片路径。这个路径是从我们的JSON文件中获取的。

步骤三： 在Vue组件的script部分定义`getThumb`方法：

```javascript

methods: {

getThumb(type) {

let thumb = {

WMS: require("@/static/img/world.jpg"), // @代表项目根目录的src文件夹

WFS: require("@/static/img/wfs.jpg"),

tool: require("@/static/img/tool.jpg")

};

return thumb[type];

}

}

```

这里使用了Webpack的require语法来引入静态资源。注意路径的写法，确保它们正确指向了static文件夹下的图片资源。

三、配置路径别名

在Vue的配置文件（通常是`vue.config.js`或`webpack.config.js`）中，我们需要配置路径别名以确保Webpack能够正确静态资源的路径。例如：

```javascript

resolve: {

extensions: ['.js', '.vue', '.json'], // 配置文件类型别名

alias: {

'vue$': 'vue/dist/vue.esm.js', // Vue别名配置（一般不用更改）

'@': resolve('src'), // 为src目录设置别名，方便引用src下的文件

'img': resolve('static/img'), // 为static/img目录设置别名，方便引用图片资源

'%': resolve('./static') // 为整个static目录设置别名，根据需要配置

}

}

``` 这里的别名配置可以帮助我们简化路径的书写方式，提高代码的可读性和维护性。通过配置别名，我们可以直接使用`@`或`%`等符号来代替复杂的相对路径或绝对路径。这样在进行图片资源引用时，就可以直接使用这些别名来简化路径书写。注意这里的路径需要根据实际情况进行配置，确保它们正确指向了项目的静态资源文件夹。通过这样的配置，我们可以更灵活地处理静态资源的引用问题。需要注意的是，具体的配置方式可能会因项目结构和使用的构建工具而有所不同。因此在实际应用中需要根据具体情况进行调整和优化。四、总结以上就是关于Vue中动态加载本地JSON图片路径的方法介绍。这种方法能够解决在Vue项目中动态加载图片时遇到的问题，使得我们能够根据后端返回的数据动态地展示不同的图片。对于需要进行动态图片加载的朋友来说，这是一种非常实用的技术。希望本文的介绍能够对大家有所帮助。在实际开发中如果遇到问题或者需要进一步的优化方案，欢迎随时交流和。