[ { id: 1, img: "@/assets/images/旅游引导页1.png" }, { id: 2, img: "@/assets/images/旅游引导页2.png" }, { id: 3, img: "@/assets/images/旅游引导页3.png" }, ] 怎么对象里面每一项img变成url
时间: 2023-05-11 16:03:10 浏览: 50
你可以使用require.context()方法来实现这个功能。具体代码如下:
const images = require.context('@/assets/images', true, /\.(png|jpe?g|gif|svg)$/);
const imageUrls = [
{ id: 1, img: images('./旅游引导页1.png') },
{ id: 2, img: images('./旅游引导页2.png') },
{ id: 3, img: images('./旅游引导页3.png') },
];
这样就可以将对象里面每一项img变成url了。
相关问题
<img :src=`~@/assets/images/${item.imgUrl}` alt="" /> 请问这样做为什么不对
这段代码使用的是 Vue.js 的语法,`:src` 是 Vue.js 绑定属性的一种方式,用于将数据绑定到元素的 `src` 属性上。
在这里,`~@` 是 Webpack 的别名,用于指向项目根目录。但是在模板字符串中使用别名时,Webpack 会将这个别名视为字符串的一部分,而不是解析成真正的路径。因此,你需要在模板字符串中使用 `require` 函数,将别名转换成真正的路径,例如:
```
<img :src="require(`@/assets/images/${item.imgUrl}`)" alt="" />
```
在这里,`@` 也是 Webpack 的别名,指向 `src` 目录,所以这里使用 `@` 代替了 `~@`。
这样做可以让 Webpack 在打包时正确地解析路径,并将图片打包到正确的位置。
我使用了该代码,但是报错[Vue warn]: Error in render: "Error: Cannot find module './~@/assets/img/maojianpng.png'" 请问怎么解决
这个错误可能是因为 Webpack 在打包时无法正确解析图片路径,导致找不到图片。你可以尝试以下几个方法解决:
1. 检查图片路径是否正确,确保图片路径与你的项目结构匹配。
2. 在 Webpack 配置文件中,添加针对图片的 loader,例如 file-loader 或 url-loader,将图片打包到正确的位置。具体的配置可以参考以下代码:
```javascript
module.exports = {
// ...其他配置
module: {
rules: [
// 添加针对图片的 loader
{
test: /\.(png|jpg|jpeg|gif)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 8192,
name: 'images/[name].[hash:8].[ext]'
}
}
]
}
]
}
}
```
3. 尝试使用绝对路径或相对路径引用图片,例如:
```html
<img :src="require('@/assets/img/maojianpng.png')" />
```
或者
```html
<img :src="require('../../assets/img/maojianpng.png')" />
```
如果以上方法都无法解决问题,请提供更多的代码和报错信息,以便我更好地帮助你解决问题。